Introduction

Users are sometimes confront to select box which can have multiple option selected. To make multiple selection, user have to hold a meta key (shift, alt, option, ...). If he forgets to hold that key and clicks on an option, he'll loose all his selection. This drawback is enhanced with long menu.

Details

The idea behind this plugin is to make the selection easier by decorating this multiple select box and turn it into a new UI component.

All you have to do is to define a simple div containing the select box and its label :

	<div class="decorated" id="mySelectBox2">
		<label for="mySelect2">My select</label>
		<select name="mySelect2" id="mySelect2" multiple="multiple" size="7">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3" selected="selected">3</option>
			<option value="4">4</option>
		</select>
	</div>

Add the javascript library declaration (jquery itself and jquery-decorated) :

	<script type="text/javascript" src="script/jquery-latest.pack.js"></script>
	<script type="text/javascript" src="script/jquery.decorated.js"></script>

Add the initilialization of the decoration :

	$(document).ready(function(){
		$(".decorated").decorate();
	});

Et voilà =)

In the future

I doubt that this plug in is done ... but i have no idea right now for it ... I don't have the resources to test on all browser and all platform, some interaction maybe missing for some. View the TODO list for more details

Documentation

You can find more details in the documentation