jQuery Show Hide Elements Using Select Box

If you want to show or hide additional form fields in the form by selecting from dropdown list. jQuery show hide div based on selected dropdown option. The div boxes are hidden by default using the CSS display: none; property. jQuery show/hide div based on select value.

To Create show/hide an element based on dropdown selection or selected option value using the jQuery change() method it takes following steps: –

1. Include the html code.
2. Write the jQuery change() method.
3. Include the CSS code.

HTML

<div>
    <select>
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</div>

<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

JavaScript

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});

CSS

.box{
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }

In this tutorial we learn that how to show and hide div elements based on the dropdown selection. Showing or hiding additional form fields from booking form. Show and hide div elements based on the dropdown selection.

Show and hide div on dropdown.

You can customize this code further as per your requirement.