How to display div elements using Dropdown Menu in jQuery? Last Updated : 20 Sep, 2019 Comments Improve Suggest changes 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 get selected text from a drop-down list 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 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 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 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 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 Like