CODEWITHSUNDEEP
javascripthtmlselecttogglevisibility
bdeonovic
bdeonovic

Reputation: 4220

How to toggle visibility when user makes a selection

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 :)

Upvotes: 3

Views: 1184

Answers (2)

mplungjan
mplungjan

Reputation: 177786

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>

Upvotes: 3

Bryan Agee
Bryan Agee

Reputation: 5052

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.

Upvotes: 2

Related Questions