📌  相关文章
📜  如何在 jQuery 中使用下拉菜单显示 div 元素?

📅  最后修改于: 2022-05-13 01:56:02.802000             🧑  作者: Mango

如何在 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

            
                         
            
                
                  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.           
            
                 
      

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

    选择单选按钮后:

    示例 2:与警报方法一起

    
    
      
    
         How to display div elements
          using Dropdown Menu in jQuery?
        
    
      
    
        
            

              GeeksForGeeks      

            

    jQuery | Show           and Hide div elements using Dropdown Menu       

            
                         
            
                
                  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.           
            
                 
      

    输出:

  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

            
                         
            
                
                    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.             
            
                    
      

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

    选择单选按钮后: