用于 Bootstrap 的 jQuery 多选插件

jQuery 提供了多种用于引导程序的插件，用于不同目的，可以轻松集成到 Web 应用程序中，使网站和应用程序看起来更有吸引力和更可靠。

插件可以通过两种方式包含，即单独使用 Bootstrap 的单个 *.js 文件，或者一次全部使用bootstrap.js 。

Bootstrap 多选也是 Bootstrap 的 jQuery 插件之一，它使客户端可以一次从下拉列表中选择多个选项。利用多个选择插件，下拉选项充当复选框，以便客户端可以选择多个选项，这与只能选择一个选项的普通下拉列表不同。该插件基于 Twitter Bootstrap 系统并具有许多功能。在运行时，可以使用简单的 HTML 选择轻松地将其更改为 Bootstrap 按钮。

您需要将以下资源添加到您的 HTML 文件中，以在您的网站中使用引导多选 jQuery 插件。

• 样式表以使替代项能够以下拉列表的形式打开。

• 包括 Bootstrap 和 jQuery 文件作为脚本。

 

• 引导 CDN 链接以启用下拉列表中的多选功能。

src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js”> 
 
href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css” 
rel=”stylesheet” >

• 现在创建一个带有备选列表的 HTML 下拉列表。

 
Array 
Linked list 
Strings 
Stack 
Queue 
Graph 
Tree 
Maps 

• 并且不要忘记通过调用multiselect()函数来初始化插件。

$(‘#checkboxes’).multiselect(); 

初始化插件后，选定的下拉组件($('#checkboxes'))将被替换为引导按钮，该按钮显示带有复选框的可用选项。

例子：

HTML

 
   
      
       
       
      
      
      
       
      
 
       
        .container
        { 
            margin-top: 30px; 
            color: green; 
            font-size: 20px;
        }  
      
   
   
   
    
    GeeksforGeeks
 
 
     
        Select your choice: 
        
            Linked list       
            Array            
            Strings   
            Stack 
            Queue
            Graph 
            Tree
            Maps
         
    

                      

---

输出：现在，正如您在 输出，创建了一个多选下拉列表，客户端可以通过使用多个选择插件一次选择多个选项，并按照上述步骤进行集成。

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器