jQuery Plugin: Multiple Select

Introduction: What does it do?

This tiny jQuery plugin (based on JavaScript) improves the usability of standard HTML multiple select fields.

Demonstration

Form with Multiple Select

Click on any option in the select field. The previously selected options will not be lost without holding the CTRL key.

How does it work?

Step 1

Include jQuery and plugin file:

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.multiple-select.js"></script>

Step 2

Create a select field like this one (make sure you have the "multiple"-attribute stated): 

	<select name="selectfield" id="selecfield" multiple="multiple" size="5">
		<option value="AF" selected="selected">Afghanistan</option>
		<option value="AL">Albania</option>
		<option value="DZ">Algeria</option>
		<option value="AS">American Samoa</option>
		<option value="AD" selected="selected">Andorra</option>
		<option value="AO">Angola</option>
		<option value="AI">Anguilla</option>
		<option value="AQ">Antarctica</option>
	</select>

Step 3

Call the plugin:

	<script type="text/javascript">
	$(document).ready(function() {
		$("select[multiple]").multipleSelect();
	});
	</script>

Step 4 (optional)

Use some CSS to format the select field:

	<style type="text/css">
	select { width: 450px; }
	select[multiple] option { padding: 3px 4px; border-bottom: 1px solid #dddddd; cursor: pointer; }
	</style>

That's it.

Download Version 0.9 (ZIP, 8.00 KB)