Show hide a div on change of select box using jQuery


Show hide a div on change of select box using jQuery Show hide a div on change of select box using jQuery

Free


Tested pass quality product

Included new future

Demo Download

Learn how to show or hide a div on change of select box. All the magic is of change event. We can detect the selected value inside the change event function.


<style>
div {
background-color: yellow;
display: none;
text-align: center;
width: 200px;
height: 200px;
margin: 50px auto;
}
div.red {
background-color: red;
color: #fff;
}
</style>


<script>
$(document).ready(function () {
$("select").change(function (){
$("div").hide();
if($(this).val() == 'yellow') {
$("div.yellow").show();
}
else if($(this).val() == 'red') {
$("div.red").show();
}
});
});
</script>

Give feedback