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?
MutliSelect is 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, 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 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, multiselect.zip, contains the script an example page, and a couple of images. Once downloaded, upload the script to a relevant location on your hosted site.
Choosing which selects to stylize
There are three ways to style your selects:
You can define a class to specify a specific select such as class=”arc90_multiselect”. Here’s an example:
You can see multiselect in action by clicking here.
Currently, the alternating rows 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
This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.
You can send feedback on MultiSelect at the arc90 blog.