Sunday, May 23, 2010

Multiple to Single Select

(If you're in a hurry - you can get the Multi Single Select code from Github. I also have a Multi Single Select example on GAE).

I have a problem. I've become addicted to progressive enhancement. I can't bring myself to write a single line of CSS or Javascript until I'm certain my web application could work in Lynx. But this is 2010 - and since 99% of users have every right to expect a little more zazz than standard control widgets, I've been cranking out UJS libs. This is one of them.

Multi Single Select is an onload library which uses jquery to turn a boring old multi select tag like this:

Into a sexy single select box, where all choices become tags (which can be removed by clicking the X)

Build your multi select as normal html. Then in your header add the jquery.multi_single_select.js library, and code similar to this in your script tag:
jQuery(document).ready(function() {
$('#whopper').multi_single_select({list_class:'toppings', title:'Topping'});
});
Selecting from the "add" group in the drop-down adds the item to the submit list. Selecting from the "remove" group will remove them (or just click the external tag's "x").

This library is completely unobtrusive. It submits values in the same way a normal multi select would. Your server-side actions will know no difference.

Also, the Multi Single Select code on github contains a sample css lib to make your tags look all pretty.