Open In App

How to display div elements using Dropdown Menu in jQuery?

Improve
Improve
Like Article
Like
Save
Share
Report

In order to display data/content of a specific element by selecting the particular dropdown menu in jQuery, we can use the with following ways:

  1. Using hide() and show() methods:
    • hide() methods : This method is used to hiding the syntax or the element of html that you want to hide.
      Syntax:

      $(selector).hide(speed, callback);
    • show() methods : This method is used to show the syntax or the element of html that you want the user to see.
      Syntax:

      $(selector).show(speed, callback);

    Approach:

    • Selector name for dropdown menu is same as the element which is used to display the content.
    • Store the values of the selected elements in variable using .attr() method.
    • Now check for the element whether any element is selected or not.
    • If yes, use show() method for displaying the element for the selected element, otherwise use hide() method for hiding.

    Example 1:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>How to display div elements
          using Dropdown Menu in jQuery?</title>
        <script src=
      </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;"
            GeeksForGeeks 
        </h1>
            <h3> jQuery |
              Show and Hide div elements using Dropdown Menu</h3>
            <div>
                <select>
                    <option>Select</option>
                    <option value="C">C</option>
                    <option value="Cplus">C++</option>
                    <option value="Python">Python</option>
                    <option value="Java">Java</option>
                </select>
            </div>
            <div>
                <div class="C GFG" 
                     style="padding: 30px; 
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>C</strong
                  is a procedural programming language
              </div>
                <div class="Cplus GFG" 
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%;
                            background:green">
                  <strong>C++</strong
                  is a general purpose programming language
              </div>
                <div class="Python GFG"
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%;
                            background:green">
                  <strong>Python</strong
                  is a widely used general-purpose,
                  high level programming language.
              </div>
                <div class="Java GFG"
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%;
                            background:green">
                  <strong>Java</strong
                  is a most popular programming 
                  language for many years.
              </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("select").on('change', function() {
                        $(this).find("option:selected").each(function() {
                            var geeks = $(this).attr("value");
                            if (geeks) {
                                $(".GFG").not("." + geeks).hide();
                                $("." + geeks).show();
                            } else {
                                $(".GFG").hide();
                            }
      
                        });
                    }).change();
                });
            </script>
        </center>
    </body>
      
    </html>

    
    

    Output:
    Before selecting the any radio button:

    After selecting the radio button:

    Example 2: Along with alert method




    <!DOCTYPE html>
    <html>
      
    <head>
        <title> How to display div elements
          using Dropdown Menu in jQuery?</title>
        <script src=
      </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;"
            GeeksForGeeks 
        </h1>
            <h3> jQuery | Show
              and Hide div elements using Dropdown Menu
          </h3>
            <div>
                <select>
                    <option>Select</option>
                    <option value="C">C</option>
                    <option value="Cplus">C++</option>
                    <option value="Python">Python</option>
                    <option value="Java">Java</option>
                </select>
            </div>
            <div>
                <div class="C GFG" 
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>C</strong
                  is a procedural programming language
              </div>
                <div class="Cplus GFG" 
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%; 
                            background:green">
                  <strong>C++</strong
                  is a general purpose programming language
              </div>
                <div class="Python GFG"
                     style="padding: 30px; 
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>Python</strong
                  is a widely used general-purpose,
                  high level programming language.
              </div>
                <div class="Java GFG"
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>Java</strong
                  is a most popular programming language for many years.
              </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("select").on('change', function() {
                        $(this).find("option:selected").each(function() {
                            var geeks = $(this).attr("value");
                            if (geeks) {
                                $(".GFG").not("." + geeks).hide();
                                $("." + geeks).show();
                                alert("Radio button " + geeks + " is selected");
                            } else {
                                $(".GFG").hide();
                                alert("Select an Element from Menu");
                            }
      
                        });
                    }).change();
                });
            </script>
        </center>
    </body>
      
    </html>

    
    

    Output:

  2. Using css() method:
    .css() method: This method in JQuery is used to change style property of the selected element.

    Syntax:

    $(selector).css(property)

    Approach:

    • Selector name for dropdown menu is same as the element which is used to display the content.
    • Find the selected element from list using .find() method.
    • Now check for the element which element is selected.
    • Now change the display property of selected element using .css() method.

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>How to display div 
          elements using Dropdown Menu in jQuery?
      </title>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;"
            GeeksForGeeks 
        </h1>
            <h3> jQuery | Show and
              Hide div elements using Dropdown Menu</h3>
            <div>
                <select>
                    <option>Select</option>
                    <option value="C">C</option>
                    <option value="Cplus">C++</option>
                    <option value="Python">Python</option>
                    <option value="Java">Java</option>
                </select>
            </div>
            <div>
                <div class="C GFG"
                     style="padding: 30px; 
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>C</strong
                  is a procedural programming language
                </div>
                <div class="Cplus GFG" 
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>C++</strong
                  is a general purpose programming language
                </div>
                <div class="Python GFG" 
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>Python</strong
                  is a widely used general-purpose,
                  high level programming language.
                </div>
                <div class="Java GFG"
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>Java</strong
                  is a most popular programming language for many years.
                </div>
            </div>
      
            <script type="text/javascript">
                $(document).ready(function() {
                    $("select").on('change', function() {
                        $(this).find(
                            "option:selected").each(function() {
                            $(".C").css('display', (
                              this.value == 'C') ? 'block' : 'none');
                            $(".Cplus").css('display', (
                              this.value == 'Cplus') ? 'block' : 'none');
                            $(".Python").css('display', (
                              this.value == 'Python') ? 'block' : 'none');
                            $(".Java").css('display', (
                              this.value == 'Java') ? 'block' : 'none');
                        });
                    }).change();
                });
            </script>
        </center>
    </body>
      
    </html>

    
    

    Output:
    Before selecting the any radio button:

    After selecting the radio button:



Last Updated : 20 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads