根据下拉值隐藏HTML(香草)(Hide HTML based on Drop Down Value (vanilla))

编程入门 行业动态 更新时间:2024-10-28 21:18:54
根据下拉值隐藏HTML(香草)(Hide HTML based on Drop Down Value (vanilla))

我对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.

更多推荐

本文发布于:2023-07-30 13:29:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1337908.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:香草   Hide   HTML   vanilla   Drop

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!