jQuery MultiSelect

Lab Project

Ever want to put a whole bunch of Select drop downs that can have multiple selections into a tight area, only to have to struggle with layout issues?  Or have to put a layered div over over a Select and realize that Microsoft Internet Explorer 6 and lower will still display the Select?  Or have you just wanted a nice a clean way to select multiple options that don’t require Shift or Control clicking?

What is this?

jQuery MultiSelect leverages the power of jQuery, providing a clean way to display a drop down and allow multiple options to be selected with just the mouse and without taking up more room that you need.

With just a single line of code, jQuery MultiSelect styles up any select with a new and simple drop down. Your page will look clean and improved and your markup barely changes. It’s a win-win-win.

How Do I Use It?

To use jQuery MultiSelect on your site or blog, just follow these simple steps:

Download The Code

Click on the icon below to download the source code:

Download

The file, jquery_multiselect.zip, contains the script, an example page, the jQuery library, and a couple of images. Once downloaded, unzip and upload the script to a relevant location on your hosted site.

Link To The Javascript

Add a link to the javascript file in the page(s) you’d like jQuery MultiSelect implemented. Remember to adjust the path to properly point to the location of the javascript file:

 
Choosing which selects to stylize

Style your selects normally. Here’s an example:


  French
  English
  Spanish
  Japanese
 

Add a small amount of javascript to turn a select into a jQuery MultiSelect. An example
for styling the above select (with an id of “lang”) is provided below:


$(function()
{
$('#lang').multiSelect(
{
select_all_min: 3,
no_selection: "Please select a few items!",
selected_text: " clicked"
});
});

jQuery MultiSelect currently supports the following configuration arguments:

  • select_all_min – The minimum number of elements the select must have
    before the ‘Select All’ option is provided.

  • no_selection - The message to display when no items in the select are
    toggled.

  • selected_text - The message appended to the current number of options selected.

If no arguments are passed to jQuery MultiSelect, the default values will be used:

  • select_all_min – 6
  • no_selection - No Selection
  • selected_text - Options Selected

Examples

You can see jQuery MultiSelect in action by clicking here.

Supported Browsers

Currently, the jQuery MultiSelect script has been tested and confirmed on the following browsers:

  • Internet Explorer 6.0+
  • Mozilla Firefox 2.0+
  • Apple Safari 2.0+
  • Opera Version 9.0

Licensing

This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.

Discuss jQuery MultiSelect

You can send feedback on jQuery MultiSelect at the arc90 blog.