Fork me on GitHub

Please see Known Issues.

Please consult the FAQ and the Issue Tracker before creating a new issue.

Please have a look on How to contribute? and the Issue Tracker.

  1. Link the Required Files

    First, the jQuery library needs to be included. Then Twitter Bootstrap - both the Javascript library and the CSS stylesheet - needs to be included.

    <!-- Include Twitter Bootstrap and jQuery: -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
    <!-- Include the plugin's CSS and JS: -->
    <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
    

    The jQuery library can also be included using a CDN, for example the Google CDN:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    

    Note that the plugin will work both with version 2.x of the jQuery library as well as with version 1.10.x of the jQuery library. So for using the Google CDN you may have to adjust the version.

  2. Create a Select

    Now simply use HTML to create your select input which you want to turn into a multiselect. Remember to set the multiple attribute as to get a real multiselect - but do not worry, the plugin can also be used as usual select without the multiple attribute being present.

    <!-- Build your select: -->
    <select id="example-getting-started" multiple="multiple">
        <option value="cheese">Cheese</option>
        <option value="tomatoes">Tomatoes</option>
        <option value="mozarella">Mozzarella</option>
        <option value="mushrooms">Mushrooms</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="onions">Onions</option>
    </select>
    
  3. Call the Plugin

    In the end, simply call the plugin on your select. You may also specify further options, see the Options tab for further information.

    <!-- Initialize the plugin: -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('#example-getting-started').multiselect();
        });
    </script>
    

Use Firebug, Chrome Developer Tools to get the best out of the below examples.

multiple

multiple is not a real configuration option. It refers to the multiple attribute of the select the plugin is applied on. When the multiple attribute of the select is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the multiple attribute present), the first option will automatically be selected if no other option is selected in advance. See #129 for how to avoid this behavior.

The following example shows the default behavior when the multiple attribute is omitted:

<script type="text/javascript">
    $('#example-single').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-single">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

If multiple options are selected in advance and the select lacks the multiple attribute, the last option marked as selected will initially be selected by the plugin.

<script type="text/javascript">
    $('#example-single-selected').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-single-selected">
    <option value="1">Option 1</option>
    <option value="2" selected="selected">Option 2</option>
    <!-- Option 3 will be selected in advance ... -->
    <option value="3" selected="selected">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

The following example shows the default behavior when the multiple attribute is present. Initially selected options will be adopted automatically:

<script type="text/javascript">
    $('#example-multiple-selected').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-multiple-selected" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2" selected="selected">Option 2</option>
    <!-- Option 3 will be selected in advance ... -->
    <option value="3" selected="selected">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

The plugin naturally supports optgroup's, however the group headers are not clickable by default. See the enableClickableOptGroups option for details.

<script type="text/javascript">
    $('#example-multiple-optgroups').multiselect();
</script>
<select id="example-multiple-optgroups">
    <optgroup label="Group 1">
        <option value="1-1">Option 1.1</option>
        <option value="1-2" selected="selected">Option 1.2</option>
        <option value="1-3" selected="selected">Option 1.3</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="2-1">Option 2.1</option>
        <option value="2-2">Option 2.2</option>
        <option value="2-3">Option 2.3</option>
    </optgroup>
</select>
enableClickableOptGroups

If set to true, optgroup's will be clickable, allowing to easily select multiple options belonging to the same group.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableClickableOptGroups').multiselect({
            enableClickableOptGroups: true
        });
    });
</script>
disableIfEmpty

If set to true, the multiselect will be disabled if no options are given.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-disableIfEmpty').multiselect({
            disableIfEmpty: true
        });
    });
</script>
dropRight

The dropdown can also be dropped right.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-dropRight').multiselect({
            buttonWidth: '400px',
            dropRight: true
        });
    });
</script>
maxHeight

The maximum height of the dropdown. This is useful when using the plugin with plenty of options.

The multiselect on the left uses maxHeight set to 200. On the other hand, the multiselect on the right does not use maxHeight.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-with-maxHeight').multiselect({
            maxHeight: 200
        });
    });
</script>
checkboxName

The name used for the generated checkboxes. See Server-Side Processing for details.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-checkboxName').multiselect({
            checkboxName: 'multiselect[]'
        });
    });
</script>
onChange

A function which is triggered on the change event of the options. Note that the event is not triggered when selecting or deselecting options using the select and deselect methods provided by the plugin.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-onChange').multiselect({
            onChange: function(option, checked, select) {
                alert('Changed option ' + $(option).val() + '.');
            }
        });
    });
</script>
onDropdownShow

A callback called when the dropdown is shown.

The onDropdownShow option is not available when using Twitter Bootstrap 2.3.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-onDropdownShow').multiselect({
            onDropdownShow: function(event) {
                alert('Dropdown shown.');
            }
        });
    });
</script>
onDropdownHide

A callback called when the dropdown is closed.

The onDropdownHide option is not available when using Twitter Bootstrap 2.3.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-onDropdownHide').multiselect({
            onDropdownHide: function(event) {
                alert('Dropdown closed.');
            }
        });
    });
</script>
onDropdownShown

A callback called after the dropdown has been shown.

The onDropdownShown option is not available when using Twitter Bootstrap 2.3.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-onDropdownShown').multiselect({
            onDropdownShown: function(event) {
                alert('Dropdown closed.');
            }
        });
    });
</script>
onDropdownHidden

A callback called after the dropdown has been closed.

The onDropdownHidden option is not available when using Twitter Bootstrap 2.3.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-ondropdownHidden').multiselect({
            onDropdownHidden: function(event) {
                alert('Dropdown closed.');
            }
        });
    });
</script>
buttonClass

The class of the multiselect button.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-button-class').multiselect({
            buttonClass: 'btn btn-link'
        });
    });
</script>
buttonContainer

The container holding both the button as well as the dropdown.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-buttonContainer').multiselect({
            buttonContainer: '<div class="btn-group" />'
        });
    });
</script>
buttonWidth

The width of the multiselect button may be fixed using this option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-buttonWidth').multiselect({
            buttonWidth: '400px'
        });
    });
</script>
buttonText

A callback specifying the text shown on the button dependent on the currently selected options.

The callback gets the currently selected options and the select as argument and returns the string shown as button text. The default buttonText callback returns nonSelectedText in the case no option is selected, nSelectedText in the case more than numberDisplayed options are selected and the names of the selected options if less than numberDisplayed options are selected.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-buttonText').multiselect({
            buttonText: function(options, select) {
                if (options.length === 0) {
                    return 'No option selected ... ';
                }
                else if (options.length > 3) {
                    return 'More than 3 options selected! ';
                }
                 else {
                     var labels = [];
                     options.each(function() {
                         if ($(this).attr('label') !== undefined) {
                             labels.push($(this).attr('label'));
                         }
                         else {
                             labels.push($(this).html());
                         }
                     });
                     return labels.join(', ') + ' ';
                 }
            }
        });
    });
</script>
buttonTitle

A callback specifying the title of the button.

The callback gets the currently selected options and the select as argument and returns the title of the button as string. The default buttonTitle callback returns nonSelectedText in the case no option is selected and the names of the selected options of less than numberDisplayed options are selected. If more than numberDisplayed options are selected, nSelectedText is returned.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-buttonTitle').multiselect({
            buttonText: function(options, select) {
                return 'Check the title!';
            },
            buttonTitle: function(options, select) {
                var labels = [];
                options.each(function () {
                    labels.push($(this).text());
                });
                return labels.join(' - ');
            }
        });
    });
</script>
nonSelectedText

The text displayed when no option is selected. This option is used in the default buttonText and buttonTitle functions.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-nonSelectedText').multiselect({
            nonSelectedText: 'Check an option!'
        });
    });
</script>
nSelectedText

The text displayed if more than numberDisplayed options are selected. This option is used by the default buttonText and buttonTitle callbacks.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-nSelectedText').multiselect({
            nSelectedText: ' - Too many options selected!'
        });
    });
</script>
allSelectedText

The text displayed if all options are selected.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-allSelectedText').multiselect({
            allSelectedText: 'No option left ...'
        });
    });
</script>

This option may be useful in combination with the includeSelectAllOption:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-allSelectedText-includeSelectAllOption').multiselect({
            includeSelectAllOption: true,
            allSelectedText: 'No option left ...'
        });
    });
</script>
numberDisplayed

This option is used by the buttonText and buttonTitle functions to determine of too much options would be displayed.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-numberDisplayed').multiselect({
            numberDisplayed: 1
        });
    });
</script>
label

A callback used to define the labels of the options.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-label').multiselect({
            label: function(element) {
                return $(element).html() + '(' + $(element).val() + ')';
            }
        });
    });
</script>
<select id="example-label" multiple="multiple">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
    <option value="option-4">Option 4</option>
    <option value="option-5">Option 5</option>
    <option value="option-6">Option 6</option>
</select>
selectedClass

The class(es) applied on selected options.

<style type="text/css">
    #example-selectedClass-container li.multiselect-selected a label {
        color: red;
    }
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selectedClass').multiselect({
            buttonContainer: '<div class="btn-group" id="example-selectedClass-container"></div>',
            selectedClass: 'multiselect-selected'
        });
    });
</script>
includeSelectAllOption

Set to true or false to enable or disable the select all option.

To see an example using both the select all option and the filter, see the documentation of the enableFiltering option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-includeSelectAllOption').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

The includeSelectAllOption option can also be used in combination with optgroup's.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-includeSelectAllOption-optgroups').multiselect({
            includeSelectAllOption: true
        });
    });
</script>
selectAllText

The text displayed for the select all option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selectAllText').multiselect({
            includeSelectAllOption: true,
            selectAllText: 'Check all!'
        });
    });
</script>
selectAllValue

The select all option is added as additional option within the select. To distinguish this option from the original options the value used for the select all option can be configured using the selectAllValue option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selectAllValue').multiselect({
            includeSelectAllOption: true,
            selectAllValue: 'select-all-value'
        });
    });
</script>

The selectAllValue option should usually be a string, however, numeric values work as well:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selectAllValue-numeric').multiselect({
            includeSelectAllOption: true,
            selectAllValue: 0
        });
    });
</script>
selectAllName

This option allows to control the name given to the select all option. See Server-Side Processing for more details.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selectAllName').multiselect({
            includeSelectAllOption: true,
            selectAllName: 'select-all-name'
        });
    });
</script>
enableFiltering

Set to true or false to enable or disable the filter. A filter input will be added to dynamically filter all options.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableFiltering').multiselect({
            enableFiltering: true
        });
    });
</script>

The enableFiltering option can easily be used in combination with the includeSelectAllOption option:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableFiltering-includeSelectAllOption').multiselect({
            includeSelectAllOption: true,
            enableFiltering: true
        });
    });
</script>

The enableFiltering option can also be used in combination with optgroup's.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-example-enableFiltering-optgroups').multiselect({
            enableFiltering: true
        });
    });
</script>
enableCaseInsensitiveFiltering

The filter as configured above will use case sensitive filtering, by setting enableCaseInsensitiveFiltering to true this behavior can be changed to use case insensitive filtering.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableCaseInsensitiveFiltering').multiselect({
            enableCaseInsensitiveFiltering: true
        });
    });
</script>
filterBehavior

The options are filtered based on their text. This behavior can be changed to use the value of the options or both the text and the value.

In this example, the options have values from a to n. Instead of searching the text of the options, the value of the options is searched.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-filterBehavior').multiselect({
            enableFiltering: true,
            filterBehavior: 'value'
        });
    });
</script>
<select id="example-filterBehavior" multiple="multiple">
    <option value="a">Option 1</option>
    <option value="b">Option 2</option>
    <option value="c">Option 3</option>
    <option value="d">Option 4</option>
    <option value="e">Option 5</option>
    <option value="f">Option 6</option>
    <option value="g">Option 7</option>
    <option value="h">Option 8</option>
    <option value="i">Option 9</option>
    <option value="j">Option 10</option>
    <option value="k">Option 11</option>
    <option value="l">Option 12</option>
    <option value="m">Option 13</option>
    <option value="n">Option 14</option>
</select>
filterPlaceholder

The placeholder used for the filter input.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-filter-placeholder').multiselect({
            enableFiltering: true,
            filterPlaceholder: 'Search for something...'
        });
    });
</script>
<select id="example-filterBehavior" multiple="multiple">
    <option value="a">Option 1</option>
    <option value="b">Option 2</option>
    <option value="c">Option 3</option>
    <option value="d">Option 4</option>
    <option value="e">Option 5</option>
    <option value="f">Option 6</option>
    <option value="g">Option 7</option>
    <option value="h">Option 8</option>
    <option value="i">Option 9</option>
    <option value="j">Option 10</option>
    <option value="k">Option 11</option>
    <option value="l">Option 12</option>
    <option value="m">Option 13</option>
    <option value="n">Option 14</option>
</select>

The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:

However, note that messing with the template's classes may cause unexpected behavior. For example the button should always have the class .multiselect,

In addition, note that other options may also have influence on the templates, for example the buttonClass option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').multiselect({
            templates: {
                button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
                ul: '<ul class="multiselect-container dropdown-menu"></ul>',
                filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
                li: '<li><a href="javascript:void(0);"><label></label></a></li>',
                divider: '<li class="multiselect-item divider"></li>',
                liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
            }
        });
    });
</script>

For example other elements instead of buttons may be used by adaptign the template:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-filter-placeholder').multiselect({
            buttonContainer: '<div></div>',
            buttonContainer: '',
            buttonClass: '',
            templates: {
                button: '<span class="multiselect dropdown-toggle" data-toggle="dropdown">Click me!</span>'
            }
        });
    });
</script>
<style type="text/css">
    span.multiselect {
        padding: 2px 6px;
        font-weight: bold;
        cursor: pointer;
    }
</style>
.multiselect('destroy')

This method is used to destroy the plugin on the given element - meaning unbinding the plugin.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-destroy').multiselect();
        $('#example-destroy-button').on('click', function() {
            $('#example-destroy').multiselect('destroy');
        });
    });
</script>
.multiselect('refresh')

This method is used to refresh the checked checkboxes based on the currently selected options within the select. Click 'Select some options' to select some of the options. Then click refresh. The plugin will update the checkboxes accordingly.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-refresh').multiselect();

        $('#example-refresh-select').on('click', function() {
            $('option[value="1"]', $('#example-refresh')).prop('selected', true);
            $('option[value="3"]', $('#example-refresh')).prop('selected', true);
            $('option[value="4"]', $('#example-refresh')).prop('selected', true);

            alert('Option 1, 2 and 4.');
        });

        $('#example-refresh-deselect').on('click', function() {
            $('option', $('#example-refresh')).each(function(element) {
                $(this).removeAttr('selected').prop('selected', false);
            });
        });

        $('#example-refresh-button').on('click', function() {
            $('#example-refresh').multiselect('refresh');
        });
    });
</script>
.multiselect('rebuild')

Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-rebuild').multiselect();

        $('#example-rebuild-button').on('click', function() {
            $('#example-rebuild').multiselect('rebuild');
        });

        $('#example-rebuild-add').on('click', function() {
            $('#example-rebuild').append('<option value="add1">Addition 1</option>
<option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
        });

        $('#example-rebuild-delete').on('click', function() {
            $('option[value="add1"]', $('#example-rebuild')).remove();
            $('option[value="add2"]', $('#example-rebuild')).remove();
            $('option[value="add3"]', $('#example-rebuild')).remove();
        });
    });
</script>
.multiselect('select', value)

Selects an option by its value. Works also using an array of values.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-select').multiselect();

        $('#example-select-button').on('click', function() {
            $('#example-select').multiselect('select', ['1', '2', '4']);

            alert('Selected 1, 2 and 4.');
        });
    });
</script>

In addition, the method provides an additional parameter: .multiselect('select', value, triggerOnChange). If the second parameter is set to true, the method will manually trigger the onChange option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-select-onChange').multiselect({
            onChange: function(option, checked, select) {
                alert('onChange triggered ...');
            }
        });

        $('#example-select-onChange-button').on('click', function() {
            $('#example-select-onChange').multiselect('select', '1', true);
        });
    });
</script>
.multiselect('deselect', value)

Deselect an option by its value. Works also using an array of values.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-deselect').multiselect();

        $('#example-deselect-button').on('click', function() {
            $('#example-deselect').multiselect('deselect', ['1', '2', '4']);

            alert('Deselected 1, 2 and 4.');
        });
    });
</script>

The method also provides an additional parameter: .multiselect('deselect', value, triggerOnChange). If the second parameter is set to true, the method will manually trigger the onChange option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-deselect-onChange').multiselect({
            onChange: function(option, checked, select) {
                alert('onChange triggered ...');
            }
        });

        $('#example-deselect-onChange-button').on('click', function() {
            $('#example-deselect-onChange').multiselect('deselect', '1', true);
        });
    });
</script>
.multiselect('selectAll', justVisible)

Selects all options. If justVisible is set to true or not provided, all visible options are selected (when using the filter), otherweise (justVisible set to false) all options are selected.

Note that setting justVisible to true, or providing no parameter will select all visible options, that is the dropdown needs to be opened.

Currently, it is required to call .multiselect('updateButtonText') manually after calling .multiselect('selectAll', justVisible).

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selectAll').multiselect();

        $('#example-selectAll-visible').on('click', function() {
            $('#example-selectAll').multiselect('selectAll', true);
            $('#example-selectAll').multiselect('updateButtonText');
        });
        $('#example-selectAll-all').on('click', function() {
            $('#example-selectAll').multiselect('selectAll', false);
            $('#example-selectAll').multiselect('updateButtonText');
        });
    });
</script>
.multiselect('deselectAll', justVisible)

Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected.

Note that setting justVisible to true, or providing no parameter will select all visible options, that is the dropdown needs to be opened.

Currently, it is required to call .multiselect('updateButtonText') manually after calling .multiselect('selectAll', justVisible).

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-deselectAll').multiselect();

        $('#example-deselectAll-visible').on('click', function() {
            $('#example-deselectAll').multiselect('deselectAll', true);
            $('#example-deselectAll').multiselect('updateButtonText');
        });
        $('#example-deselectAll-all').on('click', function() {
            $('#example-deselectAll').multiselect('deselectAll', false);
            $('#example-deselectAll').multiselect('updateButtonText');
        });
    });
</script>
.multiselect('updateButtonText')

When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.

Note that usually this method is only needed when using .multiselect('selectAll', justVisible) or .multiselect('deselectAll', justVisible). In all other cases, .multiselect('refresh') should be used.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-deselectAll').multiselect();

        $('#example-deselectAll-visible').on('click', function() {
            
            $('#example-deselectAll').multiselect('updateButtonText', true);
        });
    });
</script>
.multiselect('setOptions', options)

Used to change configuration after initializing the multiselect. This may be useful in combination with .multiselect('rebuild').

<script type="text/javascript">
    $(document).ready(function() {

        var firstConfigurationSet = {
            includeSelectAllOption: false,
            enableFiltering: false
        };
        var secondConfigurationSet = {
            includeSelectAllOption: false,
            enableFiltering: true
        };

        var set = 1;
        $('#example-setOptions').multiselect(firstConfigurationSet);

        function rebuildMultiselect(options) {
            $('#example-setOptions').multiselect('setOptions', options);
            $('#example-setOptions').multiselect('rebuild');
        }

        $('#example-setOptions-button').on('click', function(event) {
            switch (set) {
                case 2:
                    rebuildMultiselect(firstConfigurationSet);

                    $(this).text('Configuration Set 2');
                    set = 1;
                    break;
                case 1:
                default:
                    rebuildMultiselect(secondConfigurationSet);

                    $(this).text('Configuration Set 1');
                    set = 2;
                    break;

            }
        });
    });
</script>
.multiselect('disable')

Disable both the underlying select and the dropdown button.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-disable').multiselect();

        $('#example-disable-button').on('click', function() {
            $('#example-disable').multiselect('disable');
        });
    });
</script>
.multiselect('enable')

Enable both the underlying select and the dropdown button.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enable').multiselect();

        $('#example-enable-button').on('click', function() {
            $('#example-enable').multiselect('enable');
        });
    });
</script>
.multiselect('dataprovider', data)

This method is used to provide options programmatically. See the example below.

<script type="text/javascript">
    $('#example-dataprovider').multiselect();

    var options = [
        {label: 'Option 1', title: 'Option 1', value: '1', selected: true},
        {label: 'Option 2', title: 'Option 2', value: '2'},
        {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
        {label: 'Option 4', title: 'Option 4', value: '4'},
        {label: 'Option 5', title: 'Option 5', value: '5'},
        {label: 'Option 6', title: 'Option 6', value: '6'}
    ];
    $('#example-dataprovider').multiselect('dataprovider', options);
</script>
<select id="example-dataprovider" multiple="multiple"></select>

The method is also able to handle optgroup's:

<script type="text/javascript">
    $('#example-dataprovider-optgroups').multiselect();

    var optgroups = [
        {
            label: 'Group 1', children: [
                {label: 'Option 1.1', value: '1-1'},
                {label: 'Option 1.2', value: '1-2'},
                {label: 'Option 1.3', value: '1-3'}
            ]
        },
        {
            label: 'Group 2', children: [
                {label: 'Option 2.1', value: '1'},
                {label: 'Option 2.2', value: '2'},
                {label: 'Option 2.3', value: '3'}
            ]
        }
    ];
    $('#example-dataprovider-optgroups').multiselect('dataprovider', optgroups);
</script>
<select id="example-dataprovider-optgroups" multiple="multiple"></select>

Using the onChange configuration option, the following example asks for confirmation if deselecting an option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-confirmation').multiselect({
            onChange: function(element, checked) {
                if(checked === true) {
                    //action taken here if true
                }
                else if(checked === false) {
                    if(confirm('Do you wish to deselect the element?')) {
                        //action taken here
                    }
                    else {
                        $("#example-confirmation").multiselect('select', element.val());
                    }
                }
            }
        });
    });
</script>

Limit the number of selected options using the onChange option. The user may only select a maximum of 4 options. Then all other options are disabled.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-limit').multiselect({
            onChange: function(option, checked) {
                // Get selected options.
                var selectedOptions = $('#example-limit option:selected');

                if (selectedOptions.length >= 4) {
                    // Disable all other checkboxes.
                    var nonSelectedOptions = $('#example-limit option').filter(function() {
                        return !$(this).is(':selected');
                    });

                    var dropdown = $('#example-limit').siblings('.multiselect-container');
                    nonSelectedOptions.each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', true);
                        input.parent('li').addClass('disabled');
                    });
                }
                else {
                    // Enable all checkboxes.
                    var dropdown = $('#example-limit').siblings('.multiselect-container');
                    $('#example-limit option').each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', false);
                        input.parent('li').addClass('disabled');
                    });
                }
            }
        });
    });
</script>

Record the order the options are selected. When selecting an item an ordering number will be incremented and saved within the option.

<script type="text/javascript">
    $(document).ready(function() {
        var orderCount = 0;
        $('#example-order').multiselect({
            onChange: function(option, checked) {
                if (checked) {
                    orderCount++;
                    $(option).data('order', orderCount);
                }
                else {
                    $(option).data('order', '');
                }
            },
            buttonText: function(options) {
                if (options.length === 0) {
                    return 'None selected ';
                }
                else if (options.length > 3) {
                    return options.length + ' selected  ';
                }
                else {
                    var selected = [];
                    options.each(function() {
                        selected.push([$(this).text(), $(this).data('order')]);
                    });

                    selected.sort(function(a, b) {
                        return a[1] - b[1];
                    });

                    var text = '';
                    for (var i = 0; i < selected.length; i++) {
                        text += selected[i][0] + ', ';
                    }

                    return text.substr(0, text.length -2) + ' ';
                }
            },
        });

        $('#example-order-button').on('click', function() {
            var selected = [];
            $('#example-order option:selected').each(function() {
                selected.push([$(this).val(), $(this).data('order')]);
            });

            selected.sort(function(a, b) {
                return a[1] - b[1];
            });

            var text = '';
            for (var i = 0; i < selected.length; i++) {
                text += selected[i][0] + ', ';
            }
            text = text.substring(0, text.length - 2);

            alert(text);
        });
    });
</script>

Simulate single selections using checkboxes. The behavior will be similar to a multiselect with radio buttons except that the selected option can be deselected again.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-simulate-single').multiselect({
            on: {
                change: function(option, checked) {
                    var values = [];
                    $('#example-simulate-single option').each(function() {
                        if ($(this).val() !== option.val()) {
                            values.push($(this).val());
                        }
                    });

                    $('#example-simulate-single').multiselect('deselect', values);
                }
            }
        });
    });
</script>

Using a reset button together with a multiselect.

<script type="text/javascript">
    $('#example-reset').multiselect();
        $('#example-reset').on('reset', function() {
            $('#example-reset option').each(function() {
                $(this).prop('selected', false);
            })

            $('#example-reset').multiselect('refresh');
        });
</script>
<form class="btn-group" id="example-reset-form">
    <div class="btn-group">
        <select id="example-reset" multiple="multiple">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </select>
        <button type="reset" id="example-reset-button" class="btn btn-default">Reset</button>
    </div>
</form>

Multiselect can also be used in modals:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-modal').multiselect();
    });
</script>
<button class="btn btn-default" data-toggle="modal" data-target="#example-modal-modal">Launch modal</button>
<div class="modal fade" id="example-modal-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Bootstrap Multiselect</h4>
            </div>
            <div class="modal-body">
                <select id="example-modal" multiple="multiple">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                    <option value="6">Option 6</option>
                </select>
            </div>
        </div>
    </div>
</div>

An example of using multiselect in an accordion/collapse:

Note that the overflow of the .panel needs to be visible: style="overflow:visible;". See the example below.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-collapse').multiselect();
    });
</script>
<div class="panel-group" id="example-collapse-accordion">
    <div class="panel panel-default" style="overflow:visible;">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#example-collapse-accordion" href="#example-collapse-accordion-one">
                    Bootstrap Multiselect
                </a>
            </h4>
        </div>
        <div id="example-collapse-accordion-one" class="panel-collapse collapse in">
            <div class="panel-body">
                <select id="example-collapse" multiple="multiple">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                    <option value="6">Option 6</option>
                </select>
            </div>
        </div>
    </div>
</div>

The examples below are aimed to demonstrate the performance of several features when using a large number of options:

  • Using the select all option, includeSelectAllOption set to true.
  • Additionally using a filter, enableFiltering set to true.
  • Additionally using enableClickableOptGroups.
  • Resetting the multiselect.

The below examples need to be activated. Note that this may take some time!

Use options:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-large-enable').on('click', function() {
            var options = $('#example-large-options').val();

            if (options < 1 || options > 5000) {
                $('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
            }
            else {
                $('#example-large-includeSelectAllOption').html('');
                $('#example-large-includeSelectAllOption-enableFiltering').html('');
                $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
                $('#example-large-reset').html('');

                for (var j = 0; j < options; j++) {
                    i = j + 1;
                    $('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
                    $('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');

                    var group = Math.floor(j/10) + 1;
                    var number = j % 10 + 1;
                    if (number === 1) {
                        $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
                    }
                    $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');

                    $('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
                }

                $('#example-large-includeSelectAllOption').multiselect({
                    maxHeight: 200,
                    includeSelectAllOption: true
                });

                $('#example-large-includeSelectAllOption-enableFiltering').multiselect({
                    maxHeight: 200,
                    includeSelectAllOption: true,
                    enableFiltering: true
                });

                $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').multiselect({
                    maxHeight: 200,
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    enableClickableOptGroups: true
                });

                $('#example-large-reset').multiselect({
                    maxHeight: 200,
                    includeSelectAllOption: true
                });

                $('#example-large-reset-form').on('reset', function() {
                    $('#example-large-reset').multiselect('deselectAll', false);
                    $('#example-large-reset').multiselect('updateButtonText');
                });
            }
        });
    });
</script>
<div class="btn-toolbar" style="margin-bottom:12px;">
    <div class="btn-group">
        <select id="example-large-includeSelectAllOption" multiple="multiple">
            <option value="1">Option 1</option>
        </select>
    </div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
    <div class="btn-group">
        <select id="example-large-includeSelectAllOption-enableFiltering" multiple="multiple">
            <option value="1">Option 1</option>
        </select>
    </div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
    <div class="btn-group">
        <select id="example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups" multiple="multiple">
            <option value="1">Option 1</option>
        </select>
    </div>
</div>
<form id="example-large-reset-form" style="margin-bottom:12px;">
    <div class="btn-group">
        <select id="example-large-reset" multiple="multiple">
            <option value="1">Option 1</option>
        </select>
        <button type="reset" class="btn btn-default">Reset</button>
    </div>
</form>

The below example uses a PHP script to demonstrate Server-Side Processing. Therefore, the below example will not run online - download the repository and try it on a local server.

In order to receive the correct data after submitting the form, the used select has to have an appropriate name. Note that an [] needs to be appended to the name when using the multiple option/attribute. Per default, the checkboxes used within the multiselect will not be submitted, however, this can be changed by adapting checkboxName. The select all option as well as the text input used for the filter will not be submitted. As this may be useful, the name of the select all checkbox may be adapted using the selectAllName option. The value of the select all checkbox can be controlled by the selectAllValue option while the values of the remaining checkboxes correspond to the values used by the option's of the original select.

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-post').multiselect({
            includeSelectAllOption: true,
            enableFiltering: true
        });
    });
</script>
<form class="form-horizontal" method="POST" action="post.php">
    <div class="form-group">
        <label class="col-sm-2 control-label">Multiselect</label>
        <div class="col-sm-10">
            <select id="example-post" name="multiselect[]" multiple="multiple">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
                <option value="6">Option 6</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Text Input</label>
        <div class="col-sm-10">
            <input type="text" name="text" class="form-control" placeholder="Text Input" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="checkbox"> Checkbox
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="radio">
                <label>
                    <input type="radio" name="radio"> Radio 1
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="radio"> Radio 2
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>
Tab As with other form elements, Tab is used to switch to the next form elements. Tab can be used when the dropdown is opened as well as when it is closed.
Space/Enter Space or Enter is used to open the dropdown and select options. After a multiselect is in focus, pressing Space or Enter will open the dropdown. Then, the options can be traversed using arrow up and down.
Arrow Up/Arrow Down Used to traverse the options after opening the dropdown. An option can be selected using Space or Enter.
How to contribute?
Pull requests to add additional feature or fix known bugs are always welcome! However, to make it easy for me to review and merge your pull request, the following guidelines should be considered:
  • Add one pull request per feature/fix. Otherwise, I cannot guarantee that I will merge the pull request.
  • Always document your changes. If new features are added, new options or methods should be added to the documentation (index.html) and appropriate examples should be added.
  • Add a throrough description to your pull request - yes, I am able to read your code, however, reading your description may speed up things!
  • Add comments to your code.
A full list of contributors can be found here.
How about older browsers as for example Internet Explorer 6, 7 and 8?
With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See here for details.
May I use the plugin in a commercial project (e.g. a commercial Wordpress/Joomla theme)?
The plugin is dual licensed under the Apache License v2.0 and the BSD 3-Clause License. The BSD 3-Clause License allows to use the plugin in commercial projects as long as all source files associated with this plugin retain the copyright notice.
Using return false; within the onChange option does not prevent the option from being selected/deselected ...
The return statement within the onChange method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the Further Examples section.
How to change the button class depending on the number of selected options?
This issue is addressed in 332.
Why does the plugin crash when using .multiselect('select', value); or .multiselect('deselect', value);?
This may be caused when the class used for the select occurs for other elements, as well. In addition this may be caused if the multiselect has the class .multiselect. See #330.
How to check whether filtering all options resulted no options being displayed (except the select all option)?
This issue is discussed in #317.
How to use multiple plugin instances running single selections on one page?
There is a minor bug when using multiple plugin instances with single selection on one page. The bug is described here: #331. A possible fix is suggested here: #336.
How to use the plugin within a form.form-inline?
This issue is addressed in #322
How to get the selected options using PHP?
This issue is addressed here: https://github.com/davidstutz/bootstrap-multiselect/issues/323. Mainly there are two ways, either add a name to the select:
<select id="example2" multiple="multiple" name="select[]"></select>

Or add an appropriate name to the checkboxes:

$('#example2').multiselect({
    checkboxName: 'multiselect[]'
});
Why does the plugin not work in Chrome for Mobile?
This may be caused by several reasons one of which is described and resolved here: #223.
How to underline the searched text when using the filter?
This issue is discussed in #309.
How to hide the checkboxes?
A related issue is discussed in #205 and includes a possible solution when using CSS to hide the checkboxes:
.multiselect-container input {
    display: none
}
How to use Bootstrap Multiselect using $.validate?
This topic is discussed in issue #347. The fix suggested is as follows:
var $form = $("#myForm");
var validator = $form.data('validator');
validator.settings.ignore = ':hidden:not(".multiselect")';
How to prevent the plugin from selecting the first option in single select mode?
This issue is mainly due to the default behavior of most browsers. A workaround can be found here: #129.
Which are the minimum required components of Twitter Botostrap to get the plugin working?
The plugin needs at least the styles for forms and dropdowns. In addition the JavaScript dropdown plugin from Twitter Bootstrap is required. Details can be found here: #344.
How to use the .multiselect('dataprovider', data) method?
Have a look at the Methods section. In the past, there has been some confusion about how the method handles option groups. If the documentation does not help you, have a look at the issue tracker, as for example issue #356.
A type="reset" button does not refresh the multiselect, what to do?
Have a look at the Further Examples section (in addition, issue 360 discussed this).
Using multiple select's in single selection mode with option's sharing values across the different select's.
This issue is discussed in detail here: #362. A simple solution is to use different option values for the option checkboxName:
$('.multiselect').multiselect({
    checkboxName: _.uniqueId('multiselect_')
});
where _.uniqueId('multiselect_') should be replaced with a random generator. Alternatively, a unique value for checkboxName can be used for each multiselect.
How to avoid TypeError: Cannot read property "toString" of ...?
This error may be thrown if null or undefined is provided as argument of .multiselect('select', value) or .multiselect('deselect', value), see #386.
Why is there no "uncheck all" option?
This issue is discussed in #271.
Esc does not close the dropdown?!
This issue is discussed in #368. Currently, pressing Esc will not close the dropdown as there were some bugs with this.
Slow dropdown on Chrome 35.
As discussed in #268, certain versions seem to have some performance problems, especially Chrome 35.0.1916.114m.
Using maxHeight results in the filter being not fixed at the top.
See issue . Pull requests are welcome.
Apache License, Version 2.0

Copyright 2012 - 2014 David Stutz

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

BSD 3-Clause License

Copyright (c) 2012 - 2014 David Stutz

All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
  • Neither the name of David Stutz nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


© 2012 - 2014 David Stutz - dual licensed: Apache License v2.0, BSD 3-Clause License