如何使用 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/