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: onOpen, onCheck, onCheckAll, onUncheckAll, and onOptgroupToggle callbacks

Callback target

Example 4: Optgroup support

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

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

Example 6: Demonstrating the selectedList and minWidth parameters

The selectedList parameter is set to 5. After 5 checkboxes have been checked, selectedList is disabled and yields to the selectedText parameter. minWidth is set to 400 (pixels).

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

Example 8: Multiple instances in-line