February 21, 2011

A better (js-enhanced) multi-select form element: jquery.multiselect.js

Today I created a jquery plugin to automatically convert HTML multi-select elements into a more usable form, and I think you should use it.

Github linkhttps://github.com/adambard/jquery.multiselect.js

The HTML <select multiple="multiple"> element is a travesty against usability. It's fine for just a few items, but once things start getting long, and scrolling is necessary, the situation becomes untenable. A misplaced not-ctrl-click and all your selections are lost.

A reasonable alternative is a list of checkboxes, but in a list with too many entries, it can be imposing and hard to use as well - it can be hard to scan down the list and figure out which items are selected or not.

Enter the split multiselect interface.  This handy tool stores unselected items in one list, and selected ones in another.  Double-clicking on any given element will move it to the other list.  Selections are persistent, easy to make, and easy to review.

This certainly exists already, although the only version I could find is Jquery UI Multiselect, which is nice. But, it has some shortcomings too; it's pretty bulky, has a lot of bonus features, requires a themeroller theme, and totally refused to work when I tried to use it.

So, I whipped up my own.  And, as we ought all do, I want to share it with anyone who, like me, needs exactly this.

Download (.zip): https://github.com/adambard/jquery.multiselect.js/zipball/master