Javascript show hidden div when select option is selected error
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. If value=1 is selected, it should show another hidden div.
I'm new to JS. Can you please help to find the error?
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:
function showDiv(elem){ if(elem.value == 1) document.getElementById('hidden_div').style.display = "block"; } else { document.getElementById('stepsHIDDEN').style.display = "block"; }
1 answers
solution1
0 2016-04-18 16:00:11
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".
You can use that to show or hide or <div> accordingly :
<!-- 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.