How to display div elements using Dropdown Menu in jQuery?
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 elementsusing Dropdown Menu in jQuery?</title><scriptsrc=</script></head><body><center><h1style="color:green;">GeeksForGeeks</h1><h3> jQuery |Show and Hide div elements using Dropdown Menu</h3><div><select><option>Select</option><optionvalue="C">C</option><optionvalue="Cplus">C++</option><optionvalue="Python">Python</option><optionvalue="Java">Java</option></select></div><div><divclass="C GFG"style="padding: 30px;margin-top: 30px;width :60%;background:green"><strong>C</strong>is a procedural programming language</div><divclass="Cplus GFG"style="padding: 30px;margin-top: 30px;width :60%;background:green"><strong>C++</strong>is a general purpose programming language</div><divclass="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><divclass="Java GFG"style="padding: 30px;margin-top: 30px;width :60%;background:green"><strong>Java</strong>is a most popular programminglanguage for many years.</div></div><scripttype="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 elementsusing Dropdown Menu in jQuery?</title><scriptsrc=</script></head><body><center><h1style="color:green;">GeeksForGeeks</h1><h3> jQuery | Showand Hide div elements using Dropdown Menu</h3><div><select><option>Select</option><optionvalue="C">C</option><optionvalue="Cplus">C++</option><optionvalue="Python">Python</option><optionvalue="Java">Java</option></select></div><div><divclass="C GFG"style="padding: 30px;margin-top: 30px;width :60%;background:green"><strong>C</strong>is a procedural programming language</div><divclass="Cplus GFG"style="padding: 30px;margin-top: 30px;width :60%;background:green"><strong>C++</strong>is a general purpose programming language</div><divclass="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><divclass="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><scripttype="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.
- 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 divelements using Dropdown Menu in jQuery?</title><scriptsrc=</script></head><body><center><h1style="color:green;">GeeksForGeeks</h1><h3> jQuery | Show andHide div elements using Dropdown Menu</h3><div><select><option>Select</option><optionvalue="C">C</option><optionvalue="Cplus">C++</option><optionvalue="Python">Python</option><optionvalue="Java">Java</option></select></div><div><divclass="C GFG"style="padding: 30px;margin-top: 30px;width :60%;background:green"><strong>C</strong>is a procedural programming language</div><divclass="Cplus GFG"style="padding: 30px;margin-top: 30px;width :60%;background:green"><strong>C++</strong>is a general purpose programming language</div><divclass="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><divclass="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><scripttype="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:
Please Login to comment...