Trying but failing to create multiple hidden HTML <select> dropdown lists
Question
I'm trying to create a submission form which will allow my users to create an asset register list and I'm trying to get input for a location field. The user must first however select a building, then select a floor then finally select a room.
I could include all locations as 's within a single element, however the list would be massive and ugly. Also, room names are similar across sites so it would be best to keep them in a separate element.
I would like the user to first select a building from a dropdown menu. I would then like another dropdown menu to appear below that depending on their building choice. Once they select their floor choice I would then like a third select dropdown to appear which will then ask them for the room (again depending on the option from the previous select element).
I'm able to show one hidden select list by using an if...else function and simply toggling between block/none but I don't seem to be able to utilise the same technique for the value return on the (previously) hidden select list.
I've included some primitive code. I'm not very experienced with javascript so I've just created a simple if...else statement --with plans to use a switch statement once I can get this proof of concept down.
<script>
function locCheck(choice) {
if (choice.value == "195"){
document.getElementById("floor").style.display = "block";
}
else {
document.getElementById("195").style.display = "none";
}
}
</script>
<script>
function sublocCheck(choice) {
if (choice.value == "Ground Floor"){
document.getElementById("room").style.display = "block";
}
else {
document.getElementById("room").style.display = "none";
}
}
</script>
</head>
<body>
<div id="building">
<span>site*</span>
<div>
<select onchange='locCheck(this);'>
<option value="">-- Select A Site --</option>
<option value="195">195 </option>
<option value="123">123 </option>
<option value="8">8 </option>
<option value="Off-Site">Off-Site</option>
</select>
</div>
</div>
<div id="floor" style="display: none;">
<span>Floor*</span>
<div>
<select onchange="sublocCheck(sl);">
<option value="">-- Select A Floor --</option>
<option value="Ground Floor"> Ground Floor</option>
<option value="First Floor"> First Floor</option>
<option value="Basement Floor"> Basement Floor</option>
</select>
</div>
</div>
<div id="room" style="display: none;" >
<span>room*</span>
<div>
<select>
<option>-- Select A room --</option>
<option>room1</option>
<option>room2</option>
<option>room3</option>
</select>
</div>
</div>
</body>
Building (Always visible)
Floor (was hidden, can only be shown/hidden by Building list)
Room (was hidden, can only be shown/hidden by Floor or Building list)
If this isn't clear, I'd be glad to explain further. It's pretty late and I'd just like a fresh pair of eyes to look at my code.
thanks in advance,
L
1 answers
solution1
0 ACCPTED 2019-09-10 21:39:21
Your function call is wrong. Fix it to onchange="sublocCheck(this);" and it will fix your issue.
Second Problem is the else statement of locCheck the display none shall go to id=floor not id=195
By the way re-think about your approach. If you unselect the 195, the floor dropdown will hide. then you can't hide the room number dropdown.
<head> <script> function locCheck(choice) { if (choice.value == "195"){ document.getElementById("floor").style.display = "block"; } else { document.getElementById("floor").style.display = "none"; } } </script> <script> function sublocCheck(choice) { if (choice.value == "Ground Floor"){ document.getElementById("room").style.display = "block"; } else { document.getElementById("room").style.display = "none"; } } </script> </head> <body> <div id="building"> <span>site*</span> <div> <select onchange='locCheck(this);'> <option value="">-- Select A Site --</option> <option value="195">195 </option> <option value="123">123 </option> <option value="8">8 </option> <option value="Off-Site">Off-Site</option> </select> </div> </div> <div id="floor" style="display: none;"> <span>Floor*</span> <div> <select onchange="sublocCheck(this);"> <option value="">-- Select A Floor --</option> <option value="Ground Floor"> Ground Floor</option> <option value="First Floor"> First Floor</option> <option value="Basement Floor"> Basement Floor</option> </select> </div> </div> <div id="room" style="display: none;" > <span>room*</span> <div> <select> <option>-- Select A room --</option> <option>room1</option> <option>room2</option> <option>room3</option> </select> </div> </div> </body>
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.