Semantic-UI 表单下拉内容

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 使我们的网站看起来漂亮且响应迅速。它具有预定义的类，例如引导程序，用于使我们的网站更具交互性。它有一些预先构建的语义组件，我们可以使用这些组件来创建响应式网站。

表单是一个容器，具有不同类型的输入元素，例如文本字段、提交按钮、单选按钮、复选框等。

Semantic-UI Form用于使用表单类创建漂亮的表单。表单下拉内容用于创建项目列表，我们可以从一系列选项中选择一个选项。我们还可以使用输入文本字段搜索任何下拉项目。我们将使用下拉类来创建下拉列表。

在本文中，我们将讨论 Semantic-UI 中的表单下拉内容。

Semantic-UI 表单下拉内容类：

• dropdown：该类用于创建包含某些项目的下拉列表。

句法：

  

      ....
      

          ......
      
  

示例 1：以下代码演示了 Semantic-UI 表单下拉内容。

HTML

  

    Semantic-UI Form Dropdown Content
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
  
        Semantic-UI Form Dropdown Content
    
  
    
        
            Dropdown
  
            
                
                
  
                
                    Select from dropdown
                
  
                
                    
                        Coding
                    
  
                    
                        DSA
                    
  
                    
                        App development
                    
  
                    
                        Web development
                    
                
            
        
    
  
    
        $('.ui.dropdown').dropdown();
    

  

输出：

Semantic-UI 表单下拉内容

示例 2：以下代码通过搜索下拉项来演示 Semantic-UI 表单下拉内容。

HTML

  

    Semantic-UI Form Dropdown Content
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
  
        Semantic-UI Form Dropdown Content
    
  
    
        
            Dropdown
  
            
                
                    Select option
                
  
                
                    HTML
                
  
                
                    Bootstrap
                
  
                
                    CSS
                
  
                
                    Javascript
                
  
                
                    Node.js
                
            
        
    
  
    
        $('.ui.dropdown').dropdown();
    

  

输出：

Semantic-UI 表单下拉内容

参考： https ://semantic-ui.com/collections/form.html#dropdown