隐藏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基于下拉值（香草）

回答

相关问题