How to show and hide Html div when a dropdown select option is selected in JavaScript?

  • 3332

The following example will show you how to show and hide div elements based on the dropdown selection in a select box using the JavaScript. To show a hidden div when a select option is selected, you can set the value "style.display" to block.

index.html:

Here, we created one HTML file. Which is hold HTML and JavaScript code.

<div style="float:left; margin-right:20px;">
<select name="form_select" onchange="status(this)">
 <option value="">Select</option>
   <option value="hide">Hide</option>
   <option value="show">Show</option>
</select>
</div>

<div id="yes" >
<input type="text" id="fname" name="fname">
</div>


<script type="text/javascript">

function status(select){
   if(select.value=='show'){
    document.getElementById('yes').style.display = "block";
   }else
   {
    document.getElementById('yes').style.display = "none";
   }
} 
</script>
Tags:
Varun Singh

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.