Question

我对编码javascript非常陌生并且我搜索过几篇帖子并且无法使其工作，所以很抱歉，如果这是一个简单的答案。

我需要根据是否在下拉菜单中选择了一个选项来显示div元素。需要内联，vanilla js（没有jQuery）。这就是我所拥有的，但有些东西不起作用。

爪哇：

<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>

Answer 1

试试这个：

<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语句和函数中存在一些语法错误。 if语句的else部分也需要括号，并且在检查值时记得使用double equals。

我还在函数内移动repeatVal，否则当函数运行时，它将保持初始值，不会再次检查。通过将其置于函数中，每次启动函数时都会重置该值。

修改：感谢Kudos Johnson建议将repeatCombo放入该功能。

Answer 2

这已经解决了，但我也会抓手。

你的两个问题是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';

   }

隐藏基于下拉值的HTML（香草）

2 个答案: