We've all been there (okay, the web designers have all been there): the client wants an interface that lets them pick more than one item from a list and submit them as part of a form. And HTML offers a tag for that:
<select name="monkeys" id="monkeys" multiple>
<option value="">Pick a Monkey to Add</option>
<option value="macaque">Macaque</option>
<option selected="true" value="rhesus">Rhesus</option>
<option value="capuchin">Capuchin</option>
<option selected="true" value="howler">Howler</option>
</select>
Which renders like this:
Pick a Monkey to Add
Macaque
Rhesus
Capuchin
Howler
Everybody hates this control, because nobody understands it. On the Mac you have to hold down the command key while clicking in order to add one monkey at a time. On Windows the situation is similar: you must use the control key. Truly... it is a multiple select control that makes the baby monkeys cry.
Well my friends, today the pain stops. Today we have released
pkMultipleSelect, a simple jQuery script that
automatically replaces your multiple select elements with user-friendly multiple-select controls. No muss, no fuss, no user confusion.
All you have to do is bring both jQuery and pkMultipleSelect into your page with
script src elements, then run one line of JavaScript code to convert your multiple select elements. Single-select elements, of course, are left untouched. And if you have elements that are created later, such as elements in forms populated by AJAX, you can easily convert those too as needed. Making it pretty, of course, is a job for CSS and we've made it straightforward to do it. Complete instructions are in the README file provided in the zipfile.
If JavaScript is turned off, you simply get the original multiple select control. Can't get much more backwards-compatible than that. And yes, it's been tested in IE6, IE7, Safari and Firefox.
Edit: And Chrome,
and Opera. This thing works, people.
But don't take my word for it:
try the demo!
Download pkMultipleSelect
Edit: er0k points out there is
another implementation out there. I like that one too, but they have very different styles, so I think they are likely to serve different audiences.
Edit of the Edit: Ryan Cramer's jquery-asmselect, on the other hand, is a superior implementation of the same idea. Very well tricked-out with jQuery effects and so forth, and so similar in concept that I'm smacking my forehead over here. I probably would not have built my own if I'd spotted this one first. Mine is more lightweight, so I think it serves a purpose, but if you find yourself wanting "the same thing but more of it" check out jquery-asmselect.