WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to show and hide div elements based on dropdown selection in jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery change() method

The following example will demonstrate you how to show and hide div elements based on the dropdown selection or selected option value using the jQuery change() method in combination with the show() and hide() methods. The div boxes in the example are hidden by default using the CSS display property which value is set to none.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Show Hide Elements Using Select Box</title>
  • <style type="text/css">
  •     .box{
  •         color: #fff;
  •         padding: 20px;
  •         display: none;
  •         margin-top: 20px;
  •     }
  •     .red{ background: #ff0000; }
  •     .green{ background: #228B22; }
  •     .blue{ background: #0000ff; }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/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();
  • });
  • </script>
  • </head>
  • <body>
  •     <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>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.