如何在 jQuery 中使用下拉菜单显示 div 元素？

为了通过在 jQuery 中选择特定的下拉菜单来显示特定元素的数据/内容，我们可以使用以下方式：

1. 使用 hide() 和 show() 方法：
   • hide() 方法：此方法用于隐藏要隐藏的语法或 html 元素。
     句法：

     $(selector).hide(speed, callback);

   • show() 方法：此方法用于显示您希望用户看到的 html 的语法或元素。
     句法：

     $(selector).show(speed, callback);

   方法：

   • 下拉菜单的选择器名称与用于显示内容的元素相同。
   • 使用 .attr() 方法将所选元素的值存储在变量中。
   • 现在检查元素是否选择了任何元素。
   • 如果是，则使用show()方法显示所选元素的元素，否则使用hide()方法隐藏。

   示例 1：

     
   
       How to display div elements
         using Dropdown Menu in jQuery?
       
     
   
     
   
       
            
           GeeksForGeeks 
       
            jQuery |
             Show and Hide div elements using Dropdown Menu
           
               
                   Select
                   C
                   C++
                   Python
                   Java
               
           
           
               
                 C 
                 is a procedural programming language
             
               
                 C++ 
                 is a general purpose programming language
             
               
                 Python 
                 is a widely used general-purpose,
                 high level programming language.
             
               
                 Java 
                 is a most popular programming 
                 language for many years.
             
           
           
               $(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();
               });
           
       
   
     

   输出：
   在选择任何单选按钮之前：
   
   选择单选按钮后：
   

   示例 2：与警报方法一起

     
   
        How to display div elements
         using Dropdown Menu in jQuery?
       
     
   
     
   
       
            
           GeeksForGeeks 
       
            jQuery | Show
             and Hide div elements using Dropdown Menu
         
           
               
                   Select
                   C
                   C++
                   Python
                   Java
               
           
           
               
                 C 
                 is a procedural programming language
             
               
                 C++ 
                 is a general purpose programming language
             
               
                 Python 
                 is a widely used general-purpose,
                 high level programming language.
             
               
                 Java 
                 is a most popular programming language for many years.
             
           
           
               $(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();
               });
           
       
   
     

   输出：
   

2. 使用 css() 方法：
   .css() 方法： JQuery 中的该方法用于更改所选元素的样式属性。

   句法：

   $(selector).css(property)

   方法：

   • 下拉菜单的选择器名称与用于显示内容的元素相同。
   • 使用 .find() 方法从列表中查找所选元素。
   • 现在检查选择哪个元素的元素。
   • 现在使用 .css()方法更改所选元素的显示属性。

   例子：

     
   
       How to display div 
         elements using Dropdown Menu in jQuery?
     
       
       
   
     
   
       
            
           GeeksForGeeks 
       
            jQuery | Show and
             Hide div elements using Dropdown Menu
           
               
                   Select
                   C
                   C++
                   Python
                   Java
               
           
           
               
                   C 
                 is a procedural programming language
               
               
                   C++ 
                 is a general purpose programming language
               
               
                   Python 
                 is a widely used general-purpose,
                 high level programming language.
               
               
                   Java 
                 is a most popular programming language for many years.
               
           
     
           
               $(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();
               });
           
       
   
     

   输出：
   在选择任何单选按钮之前：
   
   选择单选按钮后：