In this tutorial, learn how to show/hide div on dropdown selected. The short answer is: use the jQuery show() and hide() to show hide div based on select option value in jQuery.
But, before you perform this, you need to first hide all the div items using CSS display:none.
Let’s find out with the example given below.
How to Show/Hide Div On Dropdown Selected Using jQuery
The display of the div dynamically happen based on the click of the selected dropdown option value. A hidden div displays and the CSS property display:block added to the displayed div element. Below is the simple example to show/hide div when you select dropdown options:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> $(document).ready(function(){ $('#myselection').on('change', function(){ var demovalue = $(this).val(); $("div.myDiv").hide(); $("#show"+demovalue).show(); }); }); </script> <style> .myDiv{ display:none; padding:10px; } #showOne{ border:1px solid red; } #showTwo{ border:1px solid green; } #showThree{ border:1px solid blue; } </style> <select id="myselection"> <option>Select Option</option> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> </select> <div id="showOne" class="myDiv"> You have selected option <strong>"One"</strong>. </div> <div id="showTwo" class="myDiv"> You have selected option <strong>"Two"</strong>. </div> <div id="showThree" class="myDiv"> You have selected option <strong>"Three"</strong>. </div> |
Output
Select your option below:
There are three options given in the select box to select. You have to select the option to display the relevant div element. To show hide div based on select option value selected, the dynamic changes can handle by using some jQuery script as given in the example above.
In addition to all these, don’t forget to add the CSS property display:none to all the div’s which you want to show/hide and display only on select of the options.
You Must Also Like to Read.