如何使用jQuery在下拉菜单中选择/取消选择多个选项？

要在下拉菜单中选择和取消选择多个选项，我们将使用HTML和CSS代码。 HTML代码有助于定义网页的基本结构，而CSS将在设计网页时受益。

该代码中使用的一些基本属性如下：

• –这是一个划分标记，可以帮助我们定义要引用的HTML代码的特定部分，以后可以在CSS样式表中轻松对其进行编辑。
• –此标记包含我们创建的CSS样式表的链接，并继承了我们要在网页中进行的样式表的所有修改。
• container-fluid –此类提供了贯穿网站的全宽容器。
• -这是一个引导网格系统，可帮助我们在一页中最多填充12行。
• mul-select –通过此类，我们可以从下拉菜单中列出的各种选项中进行选择。

方法：这是一个简单的HTML代码，用于在网站上显示下拉菜单，我们可以在其中选择多个数据结构选项，然后使用多选选项取消选择其他菜单。

例子：

HTML

  

    
    
  
    
    
  
    
    
  
    
    
  
    
    
  
    
    
  
    
        .mul-select {
            width: 160%;
        }
          
        h1 {
            color: green;
        }
    

  

    
        
            Select Options
        
        
  
        
        
            
                
  
                    
                    
                          Stack
                          Queue
                          Linked-List
                          Heap
                          Binary-Tree
                          Graph
                          Array
                      
                
            
        
    
  
    
    
        $(document).ready(function() {
            $(".mul-select").select2({
                placeholder: "select data-structures",
                tags: true,
            });
        })
    

  

在HTML代码中，我们还包含了一些JavaScript代码，因为在网页中，必须使用JavaScript才能执行的任何类型的函数。

正如我们在浏览器中打开文件所看到的那样，这是获得的输出，并且我们正在获得所需的下拉栏

这表明我们只需单击一次就可以一次选择多个选项。除此之外，我们还可以观察到所有选择的选项都被阴影为灰色。

要取消选择所选的选项，我们只需单击文本旁边的十字按钮，该选项就会自动取消选中，并且下拉菜单中的灰色阴影也已删除

下载bootstrap，css和JavaScript扩展的源-https://getbootstrap.com/docs/4.5/getting-started/introduction/