How to display div elements using Dropdown Menu in jQuery?

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    Before selecting the any radio button:

    After selecting the radio button:

    Example 2: Along with alert method

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    Before selecting the any radio button:

    After selecting the radio button:



My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.