jQuery MultiSelect Plugin - Examples

« Return to blog post & documentation

This plugin turns an ordinary HTML select control into elegant drop down list of checkboxes, stylable with ThemeRoller.

Example 1: Basic

Example 2: Pre-selected & disabled options with a custom width

Options one, three, and four have the selected="selected" attribute and are checked by default. Options five and six have the disabled="disabled" attribute. The original select input has an inline-CSS width of 300px, which the MultiSelect widget inherits.

Example 3: Disable the entire widget

The "Toggle Disable" button simply toggles the class ui-state-disabled on the select. It does NOT use the disabled attribute because of bug #6211. Be aware of this because the checkboxes might still be passed to the server when the widget is disabled.


Example 4: Open by default

NOTE: This widget is designed to operate like normal HTML select boxes. Therefore, clicking on the document or on another select will close all other open selects.

Example 5: Optgroup support

Click on an optgroup's heading to toggle the checked state of the entire group.

Example 6: onOpen, onCheck, onCheckAll, onUncheckAll, and onOptgroupToggle callbacks

Callback target

Example 7: Positioning set to "middle"; no header with a CSS drop shadow

Example 8: Displaying options in a list

A function is passed to the selectedText parameter which returns a list of the items selected, as long as 5 or less checkboxes are checked. Once 5 or more checkboxes have been checked, selectedText returns the number checked. minWidth is set to 400 (pixels).

Example 9: "Check All" text changed; input displays the number checked & the total number of checkboxes

Example 10: Multiple instances in-line

Example 11: Radio boxes instead of checkboxes.

This is a quick way to force only one option being chosen. The multiple and showHeader options are set to false, with a custom selectedText callback.