A Progressive Enhancement to <select multiple>

Multiselectable is certainly not a new idea. However, I could not find a proper implementation in jQuery. There have been other, not so traditional solutions to this problem as well.

Download Multiselectable

Multiselectable will turn this…

…into this:

How to Use

You must include the jQuery library, multiselectable.js and a one line of JavaScript to activate Multiselectable on the select element you choose. Here is an example how this page uses the plugin:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
	type="text/javascript"></script>
<script src="multiselectable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multi').multiselectable();
});
</script>

Here is some useful CSS you should also include to your page if you want it to resemble usable:

.multiselectable { width:500px; display:block; overflow: auto; width: 100%; }
.multiselectable select, .multiselectable div { width: 200px; float:left; }
.multiselectable div * { display: block; margin: 0 auto; }
.multiselectable div { display: inline; }
.multiselectable .m-selectable-controls { margin-top: 3em; width: 50px; }
.multiselectable .m-selectable-controls button { margin-top: 1em; }

You can customize the default markup to suit your needs, just keep the class names and id:s intact. However, if you just need to change the labels or the button text, you can set them easily. Here is an example:

<script type="text/javascript">
$(document).ready(function() {
	$('.multi').multiselectable({
		selectableLabel: 'All countries',
		selectedLabel: 'Countries I\'ve visited',
		moveRightText: '+',
		moveLeftText: '-'
	});
});
</script>

Some Additional Niceties

1. If you include the SortOptions plugin from the Select box manipulation plugin collection, then by default the options will be sorted automatically. Options will remain in their order even if they are transferred back and forth.
2. Double-clicking an option will move it to the other side.
3. Hitting the enter key will move selected options.

Technical Details for Server-side Developers

Multiselectable hides the original select element but does not remove it from the page. Multiselectable updates the original options to match those that are transferred right. This means that it should not interfere with any kind of sane server-side technology.

Accessibility

Multiselectable is fully functional using only a keyboard. Labels correctly point to the right elements, even when there are multiple Multiselectable controls within the page.

Licence and Copyright

Multiselectable copyright © Aki Björklund, 2009. Licenced under MIT.

Download Multiselectable