twigg twigg - 4 months ago 20
HTML Question

javascript show hidden div when select option is selected

Ok I've been searching for answers to this for a while but everything I come across (even when searching for javascript) comes up with jQuery! does nobody use plain javascript anymore?!?

So what I want, I have a drop down list (select with a number of options). When a certain option is selected I want a hidden div to display.

<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>


Then I'm trying it with this javascript code:

function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}


I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use? Or I could be completely off with this one (note to self get a good javascript book!)

Answer

try this:

<select id="test" name="form_select" onchange="showDiv(this)">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>

function showDiv(elem){
   if(elem.value == 1)
      document.getElementById('hidden_div').style.display = "block";
}