我对JavaScript编码非常陌生,我已经搜索了几篇文章,但无法得到它的工作,所以很抱歉,如果它是一个简单的答案。
我需要根据是否在下拉菜单中选择一个选项来显示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>I'm very new to coding javascript and I've searched through a couple of posts and can't get this to work, so sorry if its an easy answer.
I need to show a div element based on whether one option is selected in a drop down menu. Needs to be inline, vanilla js (no jQuery). Here's what I have, but something isn't working.
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>最满意答案
尝试这个:
<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 ,否则当函数运行时,它将保持初始值并且不会再被检查。 通过将其放入函数中,每次启动函数时都会重置该值。
编辑 :感谢荣誉约翰逊建议把repeatCombo函数以及。
Try this:
<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>You had some syntax errors in your if statement and function. The else portion of the if statement requires brackets as well and remember to use the double equals when checking a value.
I also moved the repeatVal inside the function, otherwise when the function is ran, it will remain the initial value and will not be checked again. By placing it in the function the value is reset every time the function is initiated.
Edit: Thanks to Kudos Johnson for suggesting to put repeatCombo in the function as well.
更多推荐
发布评论