Automatically disable multiselect if it has no options.

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        buttonText: function(options, select) {
            if (options.length == 0) {
                return this.nonSelectedText + ' <b class="caret"></b>';
            }
            else {
                if (options.length > this.numberDisplayed) {
                    return options.length + ' ' + this.nSelectedText + ' <b class="caret"></b>';
                }
                else {
                    var selected = '';
                    options.each(function() {
                        var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).html();

                        selected += label + ', ';
                    });
                    return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
                }
            }
        }
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        numberDisplayed: 4
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        nonSelectedText: 'You have not selected any options'
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        buttonTitle: function(options, select) {
            var selected = '';
            options.each(function () {
                selected += $(this).text() + ', ';
            });
            return selected.substr(0, selected.length - 2);
        },
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        buttonClass: 'btn-primary btn-lg'
    });
});
</script>
                            

• 100px
• 50%
• auto

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

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        buttonContainer: '<span class="dropdown" />'
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        label: function(element) {
            return $(element).html()+' ('+$(element).val()+')';
        }
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        selectedClass: null
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        onChange: function(element, checked) {
            alert('Change event invoked!');
        }
    });
});
</script>
                            

This event handler is triggered when the dropdown is shown.

Both, the onDropdownShow and the onDropdownHide options are not supported when using Twitter Bootstrap 2.3.x.

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        onDropdownShow: function(event) {
            alert('Show event invoked!');
        }
    });
});
</script>
                            

This event handler is triggered when the dropdown is hidden.

Both, the onDropdownShow and the onDropdownHide options are not supported when using Twitter Bootstrap 2.3.x.

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        onDropdownHide: function(event) {
            alert('Hide event invoked!');
        }
    });
});
</script>
                            

This event handler is triggered after the dropdown is shown.

Both, the onDropdownShown and the onDropdownHidden options are not supported when using Twitter Bootstrap 2.3.x.

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        onDropdownShown: function(event) {
            alert('Shown event invoked!');
        }
    });
});
</script>
                            

This event handler is triggered after the dropdown are hidden.

Both, the onDropdownShown and the onDropdownHidden options are not supported when using Twitter Bootstrap 2.3.x.

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        onDropdownHidden: function(event) {
            alert('Hidden event invoked!');
        }
    });
});
</script>
                            

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        maxHeight: 400
    });
});
</script>
                            

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

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

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

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

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

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

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

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        filterPlaceholder: 'Search'
    });
});
</script>
                            

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

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

<script type="text/javascript">
$(document).ready(function() {
    $('.multiselect').multiselect({
        templates: {
            divider: '<div class="divider" data-role="divider"></div>'
        }
    });
});
</script>
                            

.multiselect('destroy')

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

.multiselect('refresh')

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

.multiselect('rebuild')

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

.multiselect('select', value, triggerOnChange)

Selects an option by its value. Works also using an array of values. If triggerOnChange is set to true, the onChange event is triggered.

.multiselect('deselect', value)

Deselect an option by its value. Works also using an array of values. If triggerOnChange is set to true, the onChange event is triggered.

.multiselect('dataprovider', data)

Provides data for building the select's options the following way:

var data = [
    {label: 'Cheese', value: 'cheese'},
    {label: 'Tomatoes', value: 'tomatoes'}
];
$("#multiselect").multiselect('dataprovider', data);
                            

Alternatively, this method can also be used to build option groups (#281):

var data = [
    {title: 'First group', children: [{label: 'Cheese', value: 'cheese'}, {label: 'Tomatoes', value: 'tomatoes'}]},
    {title: 'Second group', children: [{label: 'Mozzarella', value: 'mozzarella'}, {label: 'Mushrooms', value: 'mushrooms'}]},
];
$('.multiselect').multiselect('dataprovider', data);
                            

.multiselect('setOptions', options)

Used to change configuration after initializing the multiselect. This may be useful in combination with .multiselect('rebuild'). See the Further Examples section for an example.

.multiselect('disable')

Disable both the underlying select and the dropdown button.

.multiselect('enable')

Enable both the underlying select and the dropdown button.

Use "Select" and "Deselect" to select or deselect cheese and tomatoes. Use "Values" to display the currently selected elements by using $('.multiselect').val().

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

$('#example34-select').on('click', function() {
$('#example34').multiselect('select', 'cheese');
$('#example34').multiselect('select', 'tomatoes');
});

$('#example34-deselect').on('click', function() {
$('#example34').multiselect('deselect', 'cheese');
$('#example34').multiselect('deselect', 'tomatoes');
});

$('#example34-values').on('click', function() {
$('#example34-text').text('Selected: ' + $('#example34').val()).addClass('alert alert-info');
});
</script>
                            

Use the button to toggle the selection.

<script type="text/javascript">
/**
 * Gets whether all the options are selected
 * @param {jQuery} $el
 * @returns {bool}
 */
function multiselect_selected($el) {
    var ret = true;
    $('option', $el).each(function(element) {
        if (!!!$(this).prop('selected')) {
            ret = false;
        }
    });
    return ret;
}

/**
 * Selects all the options
 * @param {jQuery} $el
 * @returns {undefined}
 */
function multiselect_selectAll($el) {
    $('option', $el).each(function(element) {
        $el.multiselect('select', $(this).val());
    });
}
/**
 * Deselects all the options
 * @param {jQuery} $el
 * @returns {undefined}
 */
function multiselect_deselectAll($el) {
    $('option', $el).each(function(element) {
        $el.multiselect('deselect', $(this).val());
    });
}

/**
 * Clears all the selected options
 * @param {jQuery} $el
 * @returns {undefined}
 */
function multiselect_toggle($el, $btn) {
    if (multiselect_selected($el)) {
        multiselect_deselectAll($el);
        $btn.text("Select All");
    }
    else {
        multiselect_selectAll($el);
        $btn.text("Deselect All");
    }
}

$(document).ready(function() {
    $('#example21').multiselect();
    $("#example21-toggle").click(function(e) {
        e.preventDefault();
        multiselect_toggle($("#example21"), $(this));
    });
});
</script>
                            

When deselecting an option you will be asked for confirmation.

<script type="text/javascript">
$(document).ready(function() {
    $('#example22').multiselect({
        buttonClass: 'btn',
        buttonWidth: 'auto',
        buttonText: function(options) {
            if (options.length == 0) {
                return 'None selected <b class="caret"></b>';
            }
            else if (options.length > 6) {
                return options.length + ' selected  <b class="caret"></b>';
            }
            else {
                var selected = '';
                options.each(function() {
                    selected += $(this).text() + ', ';
                });
                return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
            }
        },
        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 {
                    $("#example22").multiselect('select', element.val());
                }
            }
        }
    });
});
</script>
                            

Switching between different configuration sets is possible using a combination of .multiselect('setOptions', options) and .multiselect('rebuild').

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

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

    var set = 1;
    $('#example33').multiselect(firstConfigurationSet);

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

    $('#example33-configuration-set').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>
                            

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() {
    $('#example37').multiselect({
        onChange: function(option, checked) {
            // Get selected options.
            var selectedOptions = $('#example37 option:selected');

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

                var dropdown = $('#example37').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 = $('#example37').siblings('.multiselect-container');
                $('#example37 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;
    $('#example38').multiselect({
        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) + ' ';
            }
        },
        onChange: function(option, checked) {
            if (checked) {
                orderCount++;
                $(option).data('order', orderCount);
            }
            else {
                $(option).data('order', '');
            }
        }
    });

    $('#example38-order').on('click', function() {
        var selected = [];
        $('#example38 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.

<script type="text/javascript">
$('#example40').multiselect({
    onChange: function(option, checked) {
        var values = [];
        $('#example40 option').each(function() {
            if ($(this).val() !== option.val()) {
            values.push($(this).val());
            }
        });

        $('#example40').multiselect('deselect', values);
    }
});
</script>
                            

Close dropdown after 3 selections automatically.

<script type="text/javascript">
$('#example42').multiselect({
    onChange: function(option, checked) {
        var selected = 0;
        $('option', $('#example42')).each(function() {
            if ($(this).prop('selected')) {
                selected++;
            }
        });

        if (selected >= 3) {
            $('#example42').siblings('div').children('ul').dropdown('toggle');
        }
    }
});
</script>
                            

Trigger hide.bs.dropdown and show.bs.dropdown manually.

<script type="text/javascript">
$('#example40').multiselect({
    onChange: function(option, checked) {
        var values = [];
        $('#example40 option').each(function() {
            if ($(this).val() !== option.val()) {
                values.push($(this).val());
            }
        });

        $('#example40').multiselect('deselect', values);
    }
});
</script>
                            

Using a reset button together with a multiselect.

$('#example52').multiselect();
$('#example52-form').on('reset', function() {
    $('#example52 option').each(function() {
        $(this).prop('selected', false);
    })

    $('#example52').multiselect('refresh');
});