jQuery bootstrapSelect Plugin

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


 
Output: 

Example 2: 
 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

   <!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>

chevron_right


Output: 
 

 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.