How can I show a hidden div when a select option is selected?

Question

I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). 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 vanilla 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?

Answer 1

Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.

jsFiddle

JS

document.getElementById('test').addEventListener('change', function () {     var style = this.value == 1 ? 'block' : 'none';     document.getElementById('hidden_div').style.display = style; }); 

HTML

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

Answer 2

try this:

function showDiv(divId, element)  {      document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';  }

#hidden_div {      display: none;  }

<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">     <option value="0">No</option>     <option value="1">Yes</option>  </select>  <div id="hidden_div">This is a hidden div</div>