If you want to show div on dropdown selection or hide div on dropdown selection dynamically, you have to use the jQuery show/hide function. Before you perform show/hide div on dropdown selected, you need to hide them first.
The display of the div dynamically happen based on the click of the selected dropdown option. A hidden div displays and the CSS property display:block added to the displayed div element. To perform this task, you have to add script, few HTML and also style. You may also like how to get select box option value on select using jQuery..
How to Show/Hide Div On Dropdown Selected Using jQuery
Below is the simple example to show/hide div when you select options. You have to add script, HTML and also some style CSS to hide div at the start.
|
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 40 41 42 43 44 |
<style> .myDiv{ display:none; } #showOne{ color:red; border:1px solid red; padding:10px; } #showTwo{ color:green; border:1px solid green; padding:10px; } #showThree{ color:blue; border:1px solid blue; padding:10px; } </style> <script> $(document).ready(function(){ $('#myselection').on('change', function(){ var demovalue = $(this).val(); $("div.myDiv").hide(); $("#show"+demovalue).show(); }); }); </script> <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
There is three option given in the select box. On select of each option, a div displays. To Show/Hide div on the select option 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 read.
How to Show/Hide Div On Radio Button Selection Using JQuery
Hope, you like this tutorial. If you have any query, please comment below to ask.
THE ULTIMATE TOOLKIT
Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.
Get the PDF