jQuery bootstrapSelect Plugin

Last Updated : 18 Aug, 2020

Read

Discuss

In this article, we will learn how to implement the Bootstrap dropdown feature using jQuery bootstrapSelect plugin.

Note: Please download the jQuery bootstrapSelect plugin in the working folder and include the required files in the head section of your HTML code.

<link href=”https://fonts.googleapis.com/css?family=Roboto:300, 500” rel=”stylesheet”
type=”text/css”/>

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”
rel=”stylesheet”type=”text/css”/>

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css”
rel=”stylesheet” type=”text/css”/>

<link href=”bootstrapSelect.css”rel=”stylesheet” type=”text/css”/>

<script
src=”https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js”></script>
<script src=”https://code.jquery.com/jquery-2.2.4.min.js”></script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

<script src=”bootstrapSelect.js”></script>

Example 1: The following example demonstrates the basic functionality of Bootstrap select dropdown plugin which selects a subject, bootstrap it, empty user’s selection, and sets the value in the control box.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
  
    <title>jQuery Bootstrap Dropdown Plugin</title> 
  
    <meta name="description" content=""> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1"> 
       
    <link rel="stylesheet" href= 
"https://fonts.googleapis.com/css?family=Roboto:300,500"> 
    <link rel="stylesheet" href=" 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
              integrity= 
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
              crossorigin="anonymous"> 
    <link rel="stylesheet" href=" 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
             integrity= 
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
             crossorigin="anonymous"> 
    <link rel="stylesheet" href="bootstrapSelect.css"> 
      
    <style> 
        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; 
        } 
    </style> 
</head> 
  
<body> 
   <h2>jQuery Bootstrap Dropdown Plugin</h2> 
     
    <div id="containerID"> 
         <div id="bootstrapSelectZone" 
              style="max-width:600px;width:600px;"> 
           <div> 
                <label>What is your favourite subject?</label><br /> 
                <select id="selectOptionID"> 
                    <option value=""></option> 
                    <option class="science" value="science"> 
                      Science 
                    </option> 
                    <option class="maths" value="maths" 
                            selected="selected"> 
                      Maths 
                    </option> 
                    <option class="computers" value="computers"> 
                      Computers 
                    </option> 
                    <option class="literature" value="literature"> 
                      Literature 
                    </option> 
                    <option value="history">History</option> 
                </select> 
            </div> 
            <br /> 
            <button type="button" id="btnBootstrapID"
                    class="btn btn-sm btn-default"> 
              Bootstrap 
            </button> 
            <button type="button" id="btnEmptyID" 
                    class="btn btn-sm btn-default"> 
              Empty selection 
            </button> 
            <button type="button" id="btnSetID" 
                    class="btn btn-sm btn-default"> 
              SetValue("literature") 
            </button>             
        </div> 
      <script src=" 
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"> 
      </script> 
      <script src=" 
https://code.jquery.com/jquery-2.2.4.min.js"  
              integrity= 
"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
              crossorigin="anonymous"> 
      </script> 
      <script src=" 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
              integrity= 
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
              crossorigin="anonymous"> 
      </script> 
      <script src="bootstrapSelect.js"></script> 
  
        <script> 
            $(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"); 
                });                
                 
            }); 
        </script> 
    </div> 
</html>

Output:

Example 2:

html

   <!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
  
    <title>jQuery Bootstrap Multiple choice Dropdown Plugin</title> 
  
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
      
    <link rel="stylesheet" href=" 
https://fonts.googleapis.com/css?family=Roboto:300,500"> 
    <link rel="stylesheet" href=" 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
          integrity= 
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous"> 
    <link rel="stylesheet" href=" 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
          integrity= 
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
          crossorigin="anonymous">    
    <link rel="stylesheet" href="bootstrapSelect.css"> 
      
    <style> 
        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;            
        } 
    </style> 
</head> 
  
<body> 
   <h2>Bootstrap Multiple choice Dropdown Plugin</h2> 
     
    <div id="containerID"> 
         <div id="bootstrapSelectZone" style="max-width:600px;width:600px;"> 
           <div> 
                <label>Choose multiple subjects</label><br /> 
                <select id="selectMultipleID" size="3" multiple=""> 
                    <option class="science" value="science"> 
                    Science</option> 
                    <option class="maths" value="maths"> 
                    Maths</option> 
                    <option class="computers" value="computers"> 
                    Computers</option> 
                    <option class="literature" value="literature"> 
                    Literature</option> 
                    <option value="cooking">Cooking</option> 
                    <option value="painting">Painting</option> 
                    <option value="reading">Reading</option> 
                    <option value="photography">Photography</option> 
                    <option value="writing">Writing</option> 
                    <option value="gyming">Gyming</option> 
                </select> 
            </div> 
            <br /> 
            <button type="button" id="btnBootstrapID" 
                    class="btn btn-sm btn-default"> 
               Bootstrap 
            </button>        
              
            <button type="button" id="btnEmptyID" 
                    class="btn btn-sm btn-default"> 
               Empty selection 
            </button> 
            <button type="button" id="btnDisableID" 
                    class="btn btn-sm btn-default"> 
               Disable 
            </button> 
            <button type="button" id="btnEnableID" 
                    class="btn btn-sm btn-default"> 
               Enable 
            </button> 
            <button type="button" id="btnSetID" 
                    class="btn btn-sm btn-default"> 
               SetValue("science,maths,literature") 
            </button> 
            <button type="button" id="btnDestroyID" 
                    class="btn btn-sm btn-danger"> 
               Destroy 
            </button> 
      </div> 
      <script src=" 
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"> 
      </script> 
      <script src=" 
https://code.jquery.com/jquery-2.2.4.min.js"  
              integrity= 
"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
              crossorigin="anonymous"> 
       </script> 
       <script src=" 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
               integrity= 
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
               crossorigin="anonymous"> 
       </script> 
      <script src="bootstrapSelect.js"></script> 
  
        <script> 
            $(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();                      
                });              
                 
            }); 
        </script> 
    </div> 
</html> 