选择选项被选中时，Javascript显示隐藏的div错误

Question

I'm trying to use this code for a little bit more complex select list, but doesn't seem to work. 我正在尝试将此代码用于更复杂的选择列表，但似乎不起作用。

If value=0 is selected, it should show a hidden div. 如果选择value = 0，它将显示一个隐藏的div。 If value=1 is selected, it should show another hidden div. 如果选择value = 1，它将显示另一个隐藏的div。

I'm new to JS. 我是JS的新手。 Can you please help to find the error? 您能帮忙找到错误吗？

HTML: HTML：

 <select name="status" id="soflow2" onchange="showDiv(this)"> <option>Select</option> <option value="0">Single</option> <option value="1">Married</option> <option value="1">Registered Legal Partnership</option> <option value="1">Remarried</option> <option value="0">Legally Separated</option> <option value="0">Divorced</option> <option value="0">Widowed</option> <option value="1">Informal Partnership</option> </select> <div id="stepsHIDDEN"> <button type="button" class="nextstep"><a href="04Step.html">Next</a></button> </div> <div id="questionHIDDEN"> <p> Is your spouse gainfully employed? </p> </div>

JS: JS：

 function showDiv(elem){ if(elem.value == 1) document.getElementById('hidden_div').style.display = "block"; } else { document.getElementById('stepsHIDDEN').style.display = "block"; }

Answer 1

By default, an <option> that doesn't explicitly have a value will attempt to use it's text, so when you do not have a selection, the value property will be "Select". 默认情况下，没有明确具有值的<option>会尝试使用其文本，因此，当您没有选择时， value属性将为“ Select”。

You can use that to show or hide or <div> accordingly : 您可以使用它相应地显示或隐藏或<div> ：

<!-- You may want to initially hide your section since it won't have a value -->
<div id="stepsHIDDEN" style='display:none;'>
    <button type="button" class="nextstep">
        <a href="04Step.html">Next</a>
    </button>
</div>
<script>
    function showDiv(elem){
        // If your value is `Select`, then hide your element
        if(elem.value == 'Select'){
            document.getElementById('stepsHIDDEN').style.display = "none";
        } 
        else{ 
            document.getElementById('stepsHIDDEN').style.display = "block";
        }
    }
</script>

or if you would prefer using a one liner function : 或者，如果您希望使用一个线性函数：

function showDiv(elem){
   document.getElementById('stepsHIDDEN').style.display = (elem.value == 'Select') ? "none" : "block";      
}

Complete Example 完整的例子

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <select name="status" id="soflow2" onchange="showDiv(this)"> <option>Select</option> <option value="0">Single</option> <option value="1">Married</option> <option value="1">Registered Legal Partnership</option> <option value="1">Remarried</option> <option value="0">Legally Separated</option> <option value="0">Divorced</option> <option value="0">Widowed</option> <option value="1">Informal Partnership</option> </select> <div id="stepsHIDDEN" style='display:none;'> <button type="button" class="nextstep"> <a href="04Step.html">Next</a> </button> </div> <script> function showDiv(elem){ if(elem.value == 'Select'){ document.getElementById('stepsHIDDEN').style.display = "none"; } else{ document.getElementById('stepsHIDDEN').style.display = "block"; } } </script> </body> </html>

选择选项被选中时，Javascript显示隐藏的div错误

问题描述

1 个解决方案

解决方案1
0 2016-04-18 16:00:11

选择选项被选中时，Javascript显示隐藏的div错误

问题描述

1 个解决方案

解决方案1 0 2016-04-18 16:00:11

解决方案1
0 2016-04-18 16:00:11