How to display div elements using Dropdown Menu in jQuery?

Last Updated : 20 Sep, 2019

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:

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:

html

<!DOCTYPE html>
<html>

<head>
    <title>How to display div elements
      using Dropdown Menu in jQuery?</title>
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
  </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

html

<!DOCTYPE html>
<html>

<head>
    <title> How to display div elements
      using Dropdown Menu in jQuery?</title>
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
  </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:

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:

html

<!DOCTYPE html>
<html>

<head>
    <title>How to display div 
      elements using Dropdown Menu in jQuery?
  </title>
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </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:

How to implement categories menu using jQuery UI ?

SHUBHAMSINGH10

Improve

Article Tags :

How to display div elements using Dropdown Menu in jQuery?

Similar Reads

Thank You!

What kind of Experience do you want to share?