Skip to content
Related Articles

Related Articles

Improve Article

jQuery bootstrapSelect Plugin

  • Last Updated : 18 Aug, 2020

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=
    <link rel="stylesheet" href="
              integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
              crossorigin="anonymous">
    <link rel="stylesheet" href="
             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="
      </script>
      <script src="
              integrity=
"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
              crossorigin="anonymous">
      </script>
      <script src="
              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="
          integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" href="
          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="
      </script>
      <script src="
              integrity=
"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
              crossorigin="anonymous">
       </script>
       <script src="
               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>

Output: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :