Show/Hide Div On Dropdown Selected Using jQuery

Last Updated on February 3, 2021 by Roshan Parihar

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:

Output


Select your option below:

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

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.