I have developed a new jQuery plugin, called selectList. It’s purpose is to transform the standard multiple selection box used in web forms into a nicely looking list that you can add items to and remove items from. So, it turns this:
Into this:
Apart from the more attractive appearance, the list approach is also better in terms of user friendliness, as all the selected items are shown to the user all the time. With the traditional solution, the user often has to scroll the box to check if all the desired options have been highlighted.
The plugin is actually an extension of the idea that I demonstrated in an article on multiple select fields that I wrote some time ago. Back when I wrote it, I thought of developing this plugin, and, well, I finally had a spare afternoon to write it (and half of night to deal with browser incompatibilities). Be my guest and take a look at the project page and some examples — as usual, your feedback is more than welcome.
I like it a lot, thanks for sharing.
Found one bug, though:
1. Choose “Police Academy 2″
2. Delete “Police Academy 2″ below
3. Selection stays at “PA 2″. Should be “Select movies”
4. Choose “Police Academy 2″ again
5. Bug: Nothing happens.
@Riddle: Thanks for your feedback. With respect to selection staying at the last selected option, I’ve actually been thinking that it might make more sense to go back to the hint (if it’s defined), and I’ll probably implement it this way in the next version of the plugin.
As for choosing the same option again with no effect — which browser were you using? This works correctly in those browsers that report the onclick event on <option>s, namely Firefox and Opera. Normally, the plugin captures the onchange event, but in the case of clicking the currently selected option, no change is really taking place, so onchange doesn’t get fired and it has to rely on onclick. Anyway, resetting the selection to the hint would resolve this issue too, so I guess it’s another reason to implement it.
It’s Safari 3.2.3 on a Mac.
@Riddle: So, yeah, that explains it — WebKit-based browsers do not generate the onclick event for <option> elements.