How to display div elements using Dropdown Menu in jQuery?
Last Updated :
20 Sep, 2019
Improve
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);
- 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.
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>
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>
- hide() methods : This method is used to hiding the syntax or the element of html that you want to hide.
Syntax:
- 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.
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>
After selecting the radio button:
