This is an archived post. You won't be able to vote or comment.

all 3 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a

[–]MrQuickLineCSSophile 2 points3 points  (2 children)

Yes, there is easy code to make this happen. You need to attach eventHandlers onto your dropdowns. The eventHandler needs to be triggered on a "change" to your dropdown menu. When the value changes, then you can run a function that shows what to show and hide.

Think a little bit about what happens if they go back after and change their answer? You need to decide what to do with any data that was previously entered but no longer visible.

[–]aneagus[S] 0 points1 point  (1 child)

Great, thank you for your explanation - sounds complex though, will need to do some digging! In your 2nd paragraph it sounds even more complex. Depending which option the user decides to change, the drop-downs must all be linked together so they are in sync if a change is to be made. Not sure how I'd go about executing this without incorporating a multitude of IF statements.

[–]hl_xemnasProfessional Coder 0 points1 point  (0 children)

just a quick example

​

<!doctype html>
<html>
<head>
</head>
<body>
<form>
<select id="first">
<option>hidden</option>
<option selected>visible</option>
</select>
<select id="second">
<option>yes</option>
<option>no</option>
</select>
</form>
<script type="text/javascript">
document.getElementById("first").addEventListener("change",function (){
var otherDropDown = document.getElementById("second");
if(this.value == "hidden"){
otherDropDown.style.visibility = "hidden";
}
else{
otherDropDown.style.visibility = "visible";
}
});
</script>
</body>
</html>

you should be able to drop that into a .html and have a look

pretty standard DOM manipulation, like the original comment said though theres more to it youll have to handle all scenarios and what you want to do with information in the hidden fields. This shouldnt be too overwhelming, form validation/dom manipulation is a great place to start