jQuery MultiSelect

jQuery UI MultiSelect with Filter Plugin

Filtering is available by including the jquery.multiselect.filter.js plugin and the jquery.multiselect.filter.css CSS file. Initialize filtering on any of your multiselects by calling multiselectfilter() on the widget.

$("select").multiselect().multiselectfilter(); // Show ALL if Check all

$("select").multiselect({ noneSelectedText: 'Select a Option', selectedList: 10 }).multiselectfilter();

$("select").multiselect({ noneSelectedText: 'Select a Option', selectedList: 10, checkAllText: '',  uncheckAllText: ''}).multiselectfilter(); // Hide Check all and Uncheck all


Pass any of these as a configuration object when you initialize multiselectfilter():

  • label

    The text to appear left of the input. Defaults to "Filter:"

  • width

    The width of the input in pixels. Defaults to 100px in the style sheet, but you can override this for each instance.

  • placeholder

    The HTML5 placeholder attribute value of the input. Only supported in webkit as of this writing. Defaults to "Enter keywords"

  • autoReset

    A boolean value denoting whether or not to reset the search box & any filtered options when the widget closes. Defaults to false.

  • checkAllText

    Empty to hide 'Check all'. Defaults to "Check all:"

  • uncheckAllText

    Empty to hide 'Uncheck all'. Defaults to "Uncheck all:"


  • filter

    A callback function that fires after filtering is complete. Accepts two arguments: the original event and an array of matches.

    To do something when no matches are found:

        filter: function(event, matches){
            if( !matches.length ){
                // do something

    To do something with a match:

        filter: function(event, matches){
            // find the first matching checkbox
            var first_match = $( matches[0] );

    You can also bind to the event after a multiselect has been initialized, like such:

    $("select").bind("multiselectfilterfilter", function(event, matches){
        // do something


Syntax: $("select").multiselectfilter("method_name");

  • updateCache

    Reloads the cache of values to search against. Make sure you call this after dynamically adding or removing any inputs to the multiselect.

  • destroy

    Destroys the widget.

  • widget

    Returns the wrapper div with the input and label text inside. This is a quick and easy way to access the HTML created by the plugin.

Demo jQuery UI MultiSelect Widget

jQuery UI MultiSelect Widget - Eric Hynds