How to toggle visibility when user makes a selection

Question

I have a select form with several options. I also have a div that I would like to show ONLY when a particular option is selected. Could you guys point me in the right direction? What would be the easiest thing to use for this?

Thank you :)

Answer 1

Here is a simple and non-jQuery solution

window.onload=function() {
  var sel = document.getElementById("sel1");
  sel.onchange=function() {
     document.getElementById("otherDiv").style.display=(this.value=="other")?"":"none";
  }
  sel.onchange(); // set the visibility onload too in case of reload
}

<select id="sel1">
.
.
.
<option value="other">Other</option>
</select>
<div id="otherDiv">Other options</div>

Answer 2

jQuery is a powerful javascript library that makes this kind of task trivial. Here is an example of what you're trying to do using it: jQuery - Using the radio button to show/hide a div.