jQuery bootstrapSelect Plugin

Last Updated : 13 Jul, 2023

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>
</body>
 
</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>
</body>
 
</html>

Output:

Suggest improvement

jQuery jTippy Tooltip Plugin

jQuery Timepicker Plugin

Share your thoughts in the comments

jQuery bootstrapSelect Plugin

HTML

html

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?