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
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?
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.
Link To The Javascript
Add a link to the javascript file in the page(s) you'd like alternating rows implemented. Remember to adjust the path to properly point to the location of the javascript file:
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:
Or, you can specify that all selects with attribute multiple will be stylized. To do this, add a small amount of JavaScript after you load the script to specify this choice. Along with multiple you may specify class which only stylizes those that use the arc90_multiselect class or all which will stylize every select with or without a mutliple attribute. As well as this option you may add other options to make your MultiSelect more specific to your needs.
Examples
You can see multiselect in action by clicking here.
Supported Browsers
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
Licensing
This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.
Discuss MultiSelect
You can send feedback on MultiSelect at the arc90 blog.
