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