Dodo's Picklist

Requires jQuery
A modified version of jqmultiselects jQuery plugin
Select options sorting code taken from select box manipulation
Choose one or more to add or remove. Or add all or remove all at once
Options are sorted to keep them in the same order
Last updated on 03/23/2008

Demo

Dog Breeds I Like:

Code

<script type="text/javascript">
	jQuery(function($){
		// (OPTIONAL) adjust the width of the select box to the bigger of the two
		$("select[name='selected']").selectAdjustWidth("select[name='available']");
		
		$("select[name='selected']").multiSelect("select[name='available']", {
			trigger: "input[name='remove']",
			triggerAll: "input[name='removeAll']"
			});
		
		$("select[name='available']").multiSelect("select[name='selected']", {
			trigger: "input[name='add']",
			triggerAll: "input[name='addAll']"
			});

	});
</script>

Documentation

selectAdjustWidth (optional independent call)

$("select[name='selected']").selectAdjustWidth("select[name='available']");

Put this in DOM ready code if you want the select boxes to have the same width: the width of the bigger of the two.

trigger (selector)

If you want other elements to invoke the movement of the <option> elements, provide a selector for them here. Defaults to none.

triggerAll (selector)

Provide a element to move all <option> elements. Defaults to none.

sortOptions (boolean)

If you want the options to be sorted so they always appear in the same order. Defaults to true.

autoSubmit (boolean)

By default, if the <select> has a parent <form> all of its child <option>s will be selected on that form's submit event. Without this the <option> values are not submitted. Defaults to true.

beforeMove (function)

A function to be called before moving the elements. Return true to continue moving the elements, false to cancel the operation. Defaults to none.

afterMove (function)

A function to be called after moving the elements. Defaults to none.