The arc90 lab is the playground of arc90 - a New York-based technology and strategic consulting firm. The lab is a place for us to share our ideas, tools and the occasional experiment in web technology. All ideas, experiments and tools are licensed under Creative Commons.
This site is licensed under a Creative Commons Attribution 2.5 License.
Tools
jQuery MultiSelect
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:
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:
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:
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.
