jquery_multiselect

2.3.9 • Public • Published

jQuery MultiSelect

Turn a multiselect list into a nice and easy to use list with checkboxes.

Demo

http://springstubbe.us/projects/demos/jquery-multiselect/

Usage

$('select[multiple]').multiselect();

$('select[multiple]').multiselect({
    columns: 4,
    texts: {
        placeholder: 'Select options'
    }
});

$('select[multiple]').multiselect('reload');

$('select[multiple]').multiselect( 'loadOptions', [{
    name   : 'Option Name 1',
    value  : 'option-value-1',
    checked: false,
    attributes : {
        custom1: 'value1',
        custom2: 'value2'
    }
},{
    name   : 'Option Name 2',
    value  : 'option-value-2',
    checked: false,
    attributes : {
        custom1: 'value1',
        custom2: 'value2'
    }
}]);

If your list is not visible on page load, add the jquery.actual plugin to your project. This will allow proper width calculations to happen.

Options

Option Values Default Description
columns int 1 # of columns to show options
search bool false enable option search/filering
searchOptions object
- delay int 250 time (in ms) between keystrokes until search happens
- showOptGroups bool false show option group titles if no options remaining
- onSearch function fires before search on options happens
texts object
- placeholder string Select options default text for dropdown
- search string Search search input placeholder text
- selectedOptions string selected selected suffix text
- selectAll string Select all select all text
- unselectAll string Unselect all unselect all text
- noneSelected string None Selected None selected text
selectAll bool false add select all option
selectGroup bool false add select all optgroup option
minHeight number 200 min height of option overlay
maxHeight number null max height of option overlay
showCheckbox bool true display the option checkbox
onLoad function fires at end of initial loading, hides native select list
onOptionClick function fires after on option is clicked
onControlClose function fires when the options list is closed
jqActualOpts object null options for jquery.actual
optionAttributes array array of attribute keys to copy to the checkbox input

Methods

loadOptions( options, overwrite, updateSelect )

Update options of select list. Default state will replace existing list with this one.

  • Set the second parameter to false to append to the list. (default = true)
  • Set the third parameter to false to leave the native select list as is. (default = true)

This will NOT modify the original select list element.

$('select[multiple]').multiselect( 'loadOptions', [{
    name   : 'Option Name 1',
    value  : 'option-value-1',
    checked: false
},{
    name   : 'Option Name 2',
    value  : 'option-value-2',
    checked: false
}]);

settings

Update Multiselect list settings after it has been rendered. It accepts the same options listed above.

This will reload the plugin for the select list it references

$('select[multiple]').multiselect( 'settings', { columns: 2 });

unload

Disable the jquery multiselect list and show the native select list.

This is distructive. You will have to reinitialize with all options to enable the plugin for the list.

$('select[multiple]').multiselect( 'unload' );

reload

This is a quick unload/load while maintaining options during plugin initialization.

$('select[multiple]').multiselect( 'reload' );

reset

Reset the element back to its default selected values.

$('select[multiple]').multiselect( 'reset' );

disable

Disable or enable the select list. If no second parameter is passed then true is assumed.

$('select[multiple]').multiselect( 'disable', true ); $('select[multiple]').multiselect( 'disable', false );

Callbacks

onLoad

Fires after initial loading and hides native select list

onLoad( element )

element: select list element object

onOptionClick

Fires after an option is clicked

onOptionClick( element, option )

element: select list element object

option: option element object

onControlClose

Fires when the options list is closed

onControlClose( element )

element: select list element object

onSearch

Fires before search on options happens

searchOptions.onSearch( element )

element: select list element object

Dependents (0)

Package Sidebar

Install

npm i jquery_multiselect

Weekly Downloads

158

Version

2.3.9

License

MIT

Last publish

Collaborators

  • nmanandhar