隱藏HTML基於下拉值（香草）

我很新的JavaScript編碼，我搜索了一些帖子，無法得到它的工作，所以很抱歉，如果它是一個簡單的答案。隱藏HTML基於下拉值（香草）

我需要根據是否在下拉菜單中選擇一個選項來顯示div元素。需要內聯，香草js（沒有jQuery）。這是我的，但有些不起作用。

的Java：

<script type="text/javascript"> 
    var repeatCombo = document.getElementById("repeatSelect"); 
    var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text; 

    function repeatCheck() { 

    if (repeatVal = 'Repeat Deposit') { 
     document.getElementById('repeatGroup').style.display = 'block'; 
    } 
    else document.getElementById('repeatGroup').style.display = 'none'; 

    } 
</script>

HTML：

<div class="form-group"> 
    <label class="col-md-4 control-label" for="repeatSelect">Initial/Repeat Deposit</label> 
    <div class="col-md-4"> 
    <select name="repeatSelect" class="form-control input-md" id="repeatSelect" onchange="javascript:repeatCheck();"> 
    <option value="Initial Deposit" >Initial Deposit</option> 
    <option value="Repeat Deposit" >Repeat Deposit</option> 
    </select> 
    </div> 
</div> 

<div id="repeatGroup" style="display: none;"> 
    <label class="col-md-4 control-label" for="repeatDepositInfo">Date of Initial Deposit</label> 
    <div class="col-md-4"> 
    <input name="repeatDepositInfo" class="form-control input-md" id="repeatDepositInfo" type="date" placeholder=""> 
    </div> 
</div>

來源

2017-03-04 M. Iverson

** 1）**您正在使用的賦值運算符，而不是比較操作。您應該使用'repeatVal =='重複存款'。 ** 2）**您必須將'var repeatCombo = ...'和'var repeatVal = ...'INSIDE函數放入函數，因爲'repeatVal'將會改變，'repeatCombo'不會存在，直到整個HTML文檔被加載。當*函數被調用時它將*存在。 –

試試這個：

<script type="text/javascript"> 
    function repeatCheck() { 
     var repeatCombo = document.getElementById("repeatSelect"); 
     var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text; 

     if (repeatVal == 'Repeat Deposit') { 
      document.getElementById('repeatGroup').style.display = 'block'; 
     } else { 
      document.getElementById('repeatGroup').style.display = 'none'; 
     } 
    } 
</script>

你在你的，如果有一些語法錯誤的語句和功能。 if語句的else部分也需要括號，並且在檢查值時記得使用double equals。

我也將repeatVal移到了函數內部，否則當函數運行時，它將保持初始值並且不會被再次檢查。通過將其放入函數中，每次啓動函數時都會重置該值。

編輯：感謝Kudos Johnson建議在函數中加入repeatCombo。

來源

2017-03-04 01:10:53

謝謝！對其他人也是如此。 –

這已經很好解決了，但我也會拋出我的手。

您的兩個問題是if語句條件中的賦值運算符，您需要將repeatVal變量移到函數內部，因爲每次用戶更改選定選項時都需要檢查它。就像現在一樣，腳本加載的那一刻，變量被賦予了select元素的默認值，並且是靜態的，因爲沒有任何東西可以改變它。

這裏是我的代碼...

var repeatCombo = document.getElementById("repeatSelect"); 

    function repeatCheck() { 
    var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text; 
    if (repeatVal == 'Repeat Deposit') { 
     document.getElementById('repeatGroup').style.display = 'block'; 
    } 
    else document.getElementById('repeatGroup').style.display = 'none'; 

    }

來源

2017-03-04 03:18:52

隱藏HTML基於下拉值（香草）

回答

相關問題