How to display div elements using Dropdown Menu in jQuery?

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:<!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<!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:<!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:
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="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<!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:
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);
$(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);
$(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="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
<!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:<!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:
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="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:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery
How to get the value in an input text box using jQuery ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?