Fork me on GitHub

Multiselect

This is a small jQuery plugin that helps you improve the user experience regarding the use of multiple cross selects.

It is very easy to install and can be easily customized because it has callbaks for many events, such as :

It also has a sort function that can be defined in order of your needs for each multiple select.

You can fully customize it via CSS, you can extend it and have as many multi selects as you want on the page.

Documentation

Options:

Name type default description
right string jQuery selector multiselect_id_to The select where the options are moved to
rightSelected string jQuery selector multiselect_id_rightSelected The button that moves selected options from left to right
rightAll string jQuery selector multiselect_id_rightAll The button that moves all options from left to right
leftSelected string jQuery selector multiselect_id_leftSelected The button that moves selected options from right to left
leftAll string jQuery selector multiselect_id_leftAll The button that moves all options from right to left
startUp function or false remove from left all options that are present in right Whatever you want to do with $left and $right elements when the multiselect plugin is initialised
sort function or false sort options alphabetically Will sort options when an action happend into right or left elements.
beforeMoveOneToRight function return true Whatever you want to do with $left, $right and option elements before they are moved to right. Keep in mind that this function must return a boolean value.
true will let the action to be performed.
false will stop the action
afterMoveOneToRight function no action Whatever you want to do with $left, $right and option elements after they are moved to right.
beforeMoveAllToRight function return true Whatever you want to do with $left, $right and option elements before they are moved to right with move all action. Keep in mind that this function must return a boolean value.
true will let the action to be performed.
false will stop the action
afterMoveAllToRight function no action Whatever you want to do with $left, $right and option elements after they are moved to right with move all action.
beforeMoveOneToLeft function return true Whatever you want to do with $left, $right and option elements before they are moved to left. Keep in mind that this function must return a boolean value.
true will let the action to be performed.
false will stop the action
afterMoveOneToLeft function no action Whatever you want to do with $left, $right and option elements after they are moved to left.
beforeMoveAllToLeft function return true Whatever you want to do with $left, $right and option elements before they are moved to left with move all action. Keep in mind that this function must return a boolean value.
true will let the action to be performed.
false will stop the action
afterMoveAllToLeft function no action Whatever you want to do with $left, $right and option elements after they are moved to left with move all action.

The following browsers are supported:

  • Internet Explorer 7+
  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera

Zero configuration

HTML
<div class="row-fluid">
	<div class="span5">
		<select name="from" id="multiselect" class="span12" size="8" multiple="multiple">
			<option value="1">Item 1</option>
			<option value="2">Item 5</option>
			<option value="2">Item 2</option>
			<option value="2">Item 4</option>
			<option value="3">Item 3</option>
		</select>
	</div>
	
	<div class="span2">
		<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="icon-forward"></i></button>
		<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="icon-chevron-right"></i></button>
		<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="icon-chevron-left"></i></button>
		<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="icon-backward"></i></button>
	</div>
	
	<div class="span5">
		<select name="to" id="multiselect_to" class="span12" size="8" multiple="multiple"></select>
	</div>
</div>
JavaScript
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#multiselect').multiselect();
});
</script>

With data options

HTML
<div class="row-fluid">
	<div class="span5">
		<select name="from" class="multiselect span12" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-right-selected="#left_Selected_1">
			<option value="1">Item 1</option>
			<option value="2">Item 5</option>
			<option value="2">Item 2</option>
			<option value="2">Item 4</option>
			<option value="3">Item 3</option>
		</select>
	</div>
	
	<div class="span2">
		<button type="button" id="right_All_1" class="btn btn-block"><i class="icon-forward"></i></button>
		<button type="button" id="right_Selected_1" class="btn btn-block"><i class="icon-chevron-right"></i></button>
		<button type="button" id="left_Selected_1" class="btn btn-block"><i class="icon-chevron-left"></i></button>
		<button type="button" id="left_All_1" class="btn btn-block"><i class="icon-backward"></i></button>
	</div>
	
	<div class="span5">
		<select name="to" id="multiselect_to_1" class="span12" size="8" multiple="multiple"></select>
	</div>
</div>
JavaScript
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('.multiselect').multiselect();
});
</script>

With javascript options

HTML
<div class="row-fluid">
	<div class="span5">
		<select name="from" class="js-multiselect span12" size="8" multiple="multiple">
			<option value="1">Item 1</option>
			<option value="2">Item 5</option>
			<option value="2">Item 2</option>
			<option value="2">Item 4</option>
			<option value="3">Item 3</option>
		</select>
	</div>
	
	<div class="span2">
		<button type="button" id="js_right_All_1" class="btn btn-block"><i class="icon-forward"></i></button>
		<button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="icon-chevron-right"></i></button>
		<button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="icon-chevron-left"></i></button>
		<button type="button" id="js_left_All_1" class="btn btn-block"><i class="icon-backward"></i></button>
	</div>
	
	<div class="span5">
		<select name="to" id="js_multiselect_to_1" class="span12" size="8" multiple="multiple"></select>
	</div>
</div>
JavaScript
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('.js-multiselect').multiselect({
		right: '#js_multiselect_to_1',
		rightAll: '#js_right_All_1',
		rightSelected: '#js_right_Selected_1',
		leftSelected: '#js_left_Selected_1',
		leftAll: '#js_left_All_1'
	});
});
</script>