10 Demos of Bootstrap Multiselect Dropdown by using jQuery

The Bootstrap multiselect with jQuery

The multiselect dropdown allows the visitors of the website selecting multiple options from a dropdown in a form.

Although, you may achieve that by using the multiple attribute in the <select> tag of HTML, however, instead of a dropdown, a list view type is displayed that allows users to choose multiple options.

In this article, the bootstrap-multiselect plug-in which is based on jQuery is used for creating dropdowns with multiple select features that also looks beautiful. It uses Bootstrap framework, so Bootstrap CSS and JS files are also included in the demos.

Related reading: A jQuery plug-in for multiple selections in listview and multiple selections in dropdown with checkboxes

First thing – A simple demo of multiselect

First of all, you may download the plug-in from the Github website by following this link. The demo and setup page can be seen there which is shared by the developer and contains a lot of options and respective code.

The demo HTML is quite large there and I am just trying to break up the big demo page into smaller here.

Have a look at this simple demo with only a single dropdown and minimum required files:

bootstrap multiselect

See online demo and code

The markup for this example:

<select id="multi-select-demo" multiple="multiple">

    <option value="jQuery">jQuery tutorial</option>

    <option value="Bootstrap">Bootstrap Tips</option>

    <option value="HTML">HTML</option>

    <option value="CSS">CSS tricks</option>

    <option value="angular">Angular JS</option>

</select>

The script:

<script type="text/javascript">

    $(document).ready(function() {

        $('#multi-select-demo').multiselect();

    });

</script>

The <head> section refers to the following files:

        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

 

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

 

        <link rel="stylesheet" href="css/bootstrap-multiselect/bootstrap-multiselect.css" type="text/css">

        <script type="text/javascript" src="js/bootstrap-multiselect/bootstrap-multiselect.js"></script>

A demo with option groups

In this demo, the option groups are used in the select dropdown. Three groups are created in the select dropdown where you can see a checkbox in front of each option. In this demo, the option group itself is not selectable. So, a user has to select each option in different option groups separately, have a look:

bootstrap multiselect option groups

See online demo and code

The script and markup:

<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="css/bootstrap-multiselect/bootstrap-multiselect.css" type="text/css">
        <script type="text/javascript" src="js/bootstrap-multiselect/bootstrap-multiselect.js"></script>


</head>
<body>
<div class="container">
<div class="example">
    <script type="text/javascript">
        $(document).ready(function() {
            $('#option-droup-demo').multiselect();
        });
    </script>
    <select id="option-droup-demo" multiple="multiple">
        <optgroup label="Web Development">
            <option value="jQuery">jQuery</option>
            <option value="Bootstrap">Bootstrap</option>
            <option value="HTML" selected="selected">HTML</option>
            <option value="CSS" selected="selected">CSS</option>
            <option value="Angular">Angular</option>
        </optgroup>
        <optgroup label="Programming Languages">
            <option value="Java">Java</option>
            <option value="csharp">C#</option>
            <option value="Python">Python</option>
        </optgroup>
        <optgroup label="Databases">
            <option value="MySQL">MySQL</option>
            <option value="Oracle">Oracle</option>
            <option value="MSSQL">MS SQL Server</option>
        </optgroup>        
    </select>
</div>


</div>
</div>
</body>
</html>

A demo of selectable optional group

By adding the enableClickableOptGroups as true in the jQuery code, you may enable users to select the option group itself, thus, all options under that group will be selected at one click / selection including the option group.

bootstrap option groups selectable

The only difference between this and the above example is the use of the option in the jQuery code:

    <script type="text/javascript">

        $(document).ready(function() {

            $('#option-droup-demo').multiselect({

            enableClickableOptGroups: true

        });

        });

    </script>

If used false, the option groups won’t be selectable. Also note that if an option is disabled in the option group, the code will still work. However, the disabled option will not be selected as shown in the image below:

bootstrap multiselect disable

You can see, the Python option is disabled in the dropdown.

A demo of creating collapsible option groups

You may also create the dropdown with collapsible option groups by using this multiselect Bootstrap plug-in. So, if a group is clicked, its options will collapse and if clicked again it will expand.

For that, simply set the:

enableCollapsibleOptGroups : true

in the jQuery code as shown below:

bootstrap multiselect collasible

The jQuery code:

   <script type="text/javascript">

        $(document).ready(function() {

            $('#option-droup-demo').multiselect({

            enableClickableOptGroups: true,

            enableCollapsibleOptGroups: true

        });

        });

    </script>

Setting width of the dropdown example

By using the buttonWidth option in the jQuery code, you may set the width of the dropdown. See this example where I set the width of the dropdown to 300px:

bootstrap multiselect width

The jQuery code:

    <script type="text/javascript">

        $(document).ready(function() {

            $('#boot-multiselect-demo').multiselect({

                buttonWidth: '300px',

 

        });

        });

    </script>

A demo of multiselect dropping right

By default, the options in the dropdown fall left whether using this or ordinary HTML select dropdown. You may also drop it right by using the dropRight: true option:

bootstrap multiselect drop right

The script:

    <script type="text/javascript">

        $(document).ready(function() {

            $('#boot-multiselect-demo').multiselect({

                buttonWidth: '350px',

                dropRight: true

        });

        });

    </script>

A demo of dropping multi-select towards top

Similarly, you may drop the options towards the top rather than default downwards. See the demo by clicking the image or link below:

bootstrap multiselect drop top

The script:

   <script type="text/javascript">

        $(document).ready(function() {

            $('#boot-multiselect-demo').multiselect({

            includeSelectAllOption: true,

            maxHeight: 350,

            dropUp: true

        });

        });

    </script>

A demo with filtering options

You may add a search box for filtering the options inside the multiselect dropdown. For that, simply add the following option in the jQuery code:

enableFiltering: true

This option will add a textbox where a user may enter letters to filter out the options. See this demo:

bootstrap multiselect filter

The script:

    <script type="text/javascript">

        $(document).ready(function() {

            $('#boot-multiselect-demo').multiselect({

            includeSelectAllOption: true,

            buttonWidth: 250,

            enableFiltering: true

        });

        });

    </script>

The markup remains the same as in many other examples for showing the multiselect dropdown.

Changing the default text when none of the options is selected

In all the above examples, the text displayed if none of the options is selected is: “None Selected”.

You may change this text in the context of the multiselect dropdown. For example, in our examples, I am using web development, programming languages, and databases for selecting the expertise. I will use the “Select expertise!” if none is selected as follows:

bootstrap multiselect none selected

The script:

    <script type="text/javascript">

        $(document).ready(function() {

            $('#boot-multiselect-demo').multiselect({

            nonSelectedText: 'Select expertise!',

            buttonWidth: 250,

            enableFiltering: true

        });

        });

    </script>

Other options for the multiselect dropdown

The plug-in has many other options that you may explore by going to the demo page from the Github website. For example, calling the callback functions as a dropdown is loaded, after the dropdown is shown, and calling a callback function after the dropdown is closed. You may perform the different actions on each event using this plug-in.

Plug-in link

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️