jQuery bootstrapSelect 插件

在本文中，我们将学习如何使用 jQuery bootstrapSelect插件实现 Bootstrap 下拉功能。

注意：请在工作文件夹中下载 jQuery bootstrapSelect 插件，并在 HTML 代码的 head 部分包含所需的文件。

type=”text/css”/>

rel=”stylesheet”type=”text/css”/>

rel=”stylesheet” type=”text/css”/>

src=”https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js”> 

 
 

示例 1：以下示例演示了 Bootstrap 选择下拉插件的基本功能，它选择主题、引导它、清空用户的选择并在控制框中设置值。

HTML

    
    
  
    jQuery Bootstrap Dropdown Plugin
  
    
    
       
    
    
    
    
      
    
        body
        {
            font-family: Helvetica, Arial, sans-serif;
        }
  
        #containerID
    {
            width: 90%;
            padding-top: 20px;
            padding-left: 20px;                     
        }     
        .science {
            color: #0099aa;
        }
        .maths {
            color: #00aaaa;
        }
        .computers {
            color: #aa9900;
        }
        .literature {
            color: #2a00aa;
            font-weight: bold;
            text-decoration: underline;
        }
    

  

   jQuery Bootstrap Dropdown Plugin
     
    
         
           
                What is your favourite subject?
                
                    
                    
                      Science
                    
                    
                      Maths
                    
                    
                      Computers
                    
                    
                      Literature
                    
                    History
                
            
            
            
              Bootstrap
            
            
              Empty selection
            
            
              SetValue("literature")
                        
        
      
      
      
      
      
      
      
  
        
            $(document).ready(function () {
                  
                $("#btnSetID").hide();
                $("#btnEmptyID").hide();               
  
                $("#btnBootstrapID").on("click", function () {
                    $("#selectOptionID").bootstrapSelect
                    ("init", { "maxWidth": 500 });
            $("#btnBootstrapID").hide();
                    $("#btnSetID").show();
                    $("#btnEmptyID").show();                   
                });
  
                $("#btnEmptyID").on("click", function () {
                    $("#selectOptionID").bootstrapSelect("empty");
                });
  
                $("#btnSetID").on("click", function () {
                    $("#selectOptionID").bootstrapSelect
                  ("setValue", "literature");
                });               
                 
            });
        
    

输出：

示例 2：

html

  

    
    
  
    jQuery Bootstrap Multiple choice Dropdown Plugin
  
    
    
      
    
    
       
    
      
    
        body {
            font-family: Helvetica, Arial, sans-serif;
        }
  
        #containerID
        {
            width: 90%;
            padding-top: 20px;
            padding-left: 20px; 
                      
        }
          
        .science {
            color: #0099aa;
        }
  
        .maths {
            color: #00aaaa;
        }
  
        .computers {
            color: #aa9900;
        }
  
        .literature {
            color: #2a00aa;           
        }
    

  

   Bootstrap Multiple choice Dropdown Plugin
     
    
         
           
                Choose multiple subjects
                
                    
                    Science
                    
                    Maths
                    
                    Computers
                    
                    Literature
                    Cooking
                    Painting
                    Reading
                    Photography
                    Writing
                    Gyming
                
            
            
            
               Bootstrap
                   
              
            
               Empty selection
            
            
               Disable
            
            
               Enable
            
            
               SetValue("science,maths,literature")
            
            
               Destroy
            
      
      
      
      
       
       
       
      
  
        
            $(document).ready(function () {
                  
        // Initially hiding all the buttons
                $("#btnHideID").hide();
                $("#btnShowID").hide();
                $("#btnEmptyID").hide();
                $("#btnDisableID").hide();
                $("#btnEnableID").hide();
                $("#btnSetID").hide();             
                $("#btnEmptyID").hide();
                $("#btnDestroyID").hide();               
  
                $("#btnBootstrapID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect
           (
            "init",
            { "maxWidth": 460, "maxHeight": 300, 
              "search": true ,"placeHolder":"Select anything >> "}
           );
                    $("#btnBootstrapID").hide();
                    $("#btnHideID").show();
                    $("#btnEmptyID").show();
                    $("#btnDisableID").show();
                    $("#btnSetID").show();
                    $("#btnDestroyID").show();
  
                });
                $("#btnHideID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect("hideOption", "cooking");
                    $("#btnHideID").hide();
                    $("#btnShowID").show();
                });
                $("#btnShowID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect("showOption", "cooking");
                    $("#btnHideID").show();
                    $("#btnShowID").hide();
                });
                $("#btnEmptyID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect("empty");
                });
                $("#btnDisableID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect("disable");
                    $("#btnEnableID").show();
                    $("#btnDisableID").hide();
                });
                $("#btnEnableID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect("enable");
                    $("#btnEnableID").hide();
                    $("#btnDisableID").show();
                });
                $("#btnSetID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect
                    ("setValue", "science,maths,literature");
                });
  
                $("#btnDestroyID").on("click", function () {
                    $("#selectMultipleID").bootstrapSelect("destroy");
            $("#selectMultipleID").show();
            $("#btnBootstrapID").show();
                    $("#btnHideID").hide();
                    $("#btnEmptyID").hide();
                    $("#btnDisableID").hide();
                    $("#btnSetID").hide();
                    $("#btnDestroyID").hide();                     
                });             
                 
            });
        
    

输出：