How to display div elements using Dropdown Menu in jQuery? Last Updated : 20 Sep, 2019 Summarize Comments Improve Suggest changes Share Like Article Like 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: 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: Comment More infoAdvertise with us Next Article How to sort option elements alphabetically using jQuery? S SHUBHAMSINGH10 Follow Improve Article Tags : JQuery jQuery-Misc Similar Reads How to select/deselect multiple options in dropdown using jQuery ? To select and deselect multiple options in a drop-down menu, we will use the HTML and CSS codes. HTML code helps to define the basic structure of the webpage and CSS will benefit in designing the web page. Some essential properties used in the code are as follows- <div> - This is a division ta 4 min read How to add options to a select element using jQuery? We will dynamically add the options to the select element using jQuery. jQuery has a lot of in-built methods. But, we will use some of them to accomplish the purpose of dynamically adding the options to the select element as listed below:Table of ContentBy passing the HTML of the option tag to the a 4 min read How to implement categories menu using jQuery UI ? In this article, we will learn about how to configure items in such a way that which elements are converted into selectable menu items. We can use this technique to create category headers. And rest of the items can be used as selectable. Syntax: $( "#selector" ).menu({ items: "> :not(.selector)" 2 min read How to sort option elements alphabetically using jQuery? Sort option elements alphabetically using jQuery, you can extract the options, sort them, and then append them back in the sorted order. This process helps enhance the user experience by organizing dropdown options. Below are the approaches to sort option elements alphabetically using jQuery: Table 3 min read How to get selected text from a drop-down list using jQuery? In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method 2 min read How to get selected option from Dropdown in jQuery ? In this article, we learn how to get the selected option from the dropdown list. This article requires some familiarity with HTML, CSS, JavaScript, and jQuery. We can solve this challenge by using the jQuery val() method. The val() method in jQuery is used to set or return the value of an attribute 2 min read Like