Show/Hide Div On Dropdown Selected Using jQuery

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.


You have selected option “One”.
You have selected option “Two”.
You have selected option “Three”.

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.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id