If you want to hide/show div on dropdown selected, use the jQuery hide() and show(). Before you perform hide or show div on dropdown selection, you need to hide them first using CSS display:none.
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.
How to hide and show div or section banes on dropdown selected using jQuery
Follow the below sample example for show/hide div when you select dropdown options.
HTML
<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> Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myselection').on('change', function(){
var demovalue = $(this).val();
$("div.myDiv").hide();
$("#show"+demovalue).show();
});
});
</script> Style
<style>
.myDiv{
display:none;
padding:10px;
margin-top:20px;
}
#showOne{
border:1px solid red;
}
#showTwo{
border:1px solid green;
}
#showThree{
border:1px solid blue;
}
</style> Output
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 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.
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- How to change date format in PHP?
- Slick Slider Basic With Example
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Adaptive Height In Slick Slider
- php in_array check for multiple values
- Calculate Subtotal On Quantity Increment in Woocommerce Single Product Page
- Slick Slider Center Mode With Example
- Image Lazy loading Using Slick Slider
- Create Sortable, Drag And Drop Multi Level Menu With Jquery
- How to align Placeholder Text in HTML?
