jQuery MultiSelect

Overview

jQuery MultiSelect is a configurable plugin for jQuery. It is designed to turn ordinary multi-select form controls into user-friendly dropdown lists. Check out the demo to see an example.

This project was inspired by arco90‘s MultiSelect tool, but was written entirely from scratch to make it easier to implement, more accessible, and to shorten the code length.

Features
Compatibility
Demo
Download
Usage
To Do List
Licensing & Terms of Use

Features

Produces valid XHTML
Fully customizeable via CSS
Easy to configure and implement
Degrades gracefully
Keyboard shortcuts to maximize accessibility
Optional “Select All” for convenience

Update (04 December 2009): A special thanks to Andy Richmond for his most excellent updates that brought this plugin to version 1.2.1. New features and enhancements include:

Ability to update the options dynamically via javascript: multiSelectOptionsUpdate(JSON)
Added title that displays the whole comma delimited list when using oneOrMoreSelected = *
Moved some of the functions to be closured to make them private
Changed the way the keyboard navigation worked to more closely match how a standard dropdown works
Added support for optgroups
Added the ability for selectable optgroups (i.e. select all for an optgroup)
Fixed bug where input text overlapped dropdown arrow in IE (i.e. when using oneOrMoreSelected = *)
Added option “listHeight” for min-height of the dropdown
Fixed bug where bgiframe was causing a horizontal scrollbar and on short lists extra whitespace below the options

Update (06 January 2010): With the latest version, $.serialize() will work properly with MultiSelect form controls. Each control now uses an HTML array to submit data to the receiving script (as seen in the updated demo).

Compatibility

This plugin requires jQuery 1.3 or above and has been tested to work in the following browsers:

Internet Explorer 6 & 7
Firefox 2 & 3 (beta)
Safari 3
Chrome (beta)
Opera 9

The IE6 z-index layering bug has now been resolved if you include the bgiframe plugin.

Demo

View a live demonstration of jQuery MultiSelect.

Download

Current version: jQuery MultiSelect – Version 1.2.2 (06 January 2010)

This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!

Usage

Creating

In it’s simplest form, you can create a MultiSelect form control using the following code:

$(document).ready( function() {
    $("#control_id").multiSelect();
});

where #control_id is the ID of the select element that exists on your page. You can use any valid jQuery selector as the ID, but make sure you only use select elements with the multiple=”multiple” attribute to get the expected results.

Configuring

Parameters are passed as an object to the multiSelect() function. Valid options include:

Parameter	Description	Default Value
`selectAll`	whether or not to display the “Select All” option	`true`
`selectAllText`	text to display for selecting/unselecting all options simultaneously	`Select All`
`noneSelected`	text to display when there are no selected items in the list	`‘Select options’`
`oneOrMoreSelected`	text to display when there are one or more selected items in the list (note: you can use % as a placeholder for the number of items selected). Use `*` to show a comma separated list of all selected items	`‘% selected’`

To create a MultiSelect control with multiple parameters, your code will look something like this:

$(document).ready( function() {
    $("#control_id").multiSelect({
        selectAll: false,
        noneSelected: 'Check some boxes!',
        oneOrMoreSelected: '% options checked'
    });
});

Styling

The MultiSelect plugin relies 100% on CSS for styling. To give your users an aesthetically pleasing experience, you should either use the included stylesheet or create your own. Refer to jquery.multiSelect.css to make any changes in the styles.

Callback

If you specify a callback function, the MultiSelect control will execute it whenever a checkbox’s checked state is changed. Currently, the function passes the checkbox element that was clicked as a jQuery object. To specify a callback function, your code will look something like this:

$(document).ready( function() {
    $("#control_id").multiSelect(options, function() {
        alert('Something was checked!');
    });
});

where options is either null or a JavaScript object (see configuring for details).

A Beautiful Site, LLC.