jQuery multiselect plugin with two sides

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
undo	`string` jQuery selector	`multiselect_id`_undo	The `button` that triggers the undo action
redo	`string` jQuery selector	`multiselect_id`_redo	The `button` that triggers the redo action
moveUp	`string` jQuery selector	`multiselect_id`_move_up	The `button` that move options from right side to the top
moveDown	`string` jQuery selector	`multiselect_id`_move_down	The `button` that move options from right side to the bottom
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.
beforeMoveToRight	`function`	return `true`	Whatever you want to do with `$left`, `$right` and `$options` elements before they are moved to right. `beforeMoveToRight: function($left, $right, $options) { ...; return Boolean; }`. `$left` - jQuery element pointing to left side `select` element `$right` - jQuery element pointing to right side `select` element `$options` - jQuery element containing all selected options Keep in mind that this function must return a boolean value. `true` will let the action to be performed `false` will stop the action
moveToRight	`function`	return `this`	If you want to define your own `moveToRight` functionality you can do this by defining `moveToRight: function(Multiselect, $options, event, silent, skipStack) { ... }` `Multiselect` - current instance of multiselect `$options` - jQuery element containing all selected options `event` - the event that initialised the action `silent` - `boolean` that tells if you have to trigger `beforeMoveToRight` and `afterMoveToRight` `skipStack` - `boolean` that tells if you have to handle `undo/redo` stack
afterMoveToRight	`function`	no action	Whatever you want to do with `$left`, `$right` and `$options` elements after they are moved to right. `afterMoveToRight: function($left, $right, $options) { ...; }` `$left` - jQuery element pointing to left side `select` element `$right` - jQuery element pointing to right side `select` element `$options` - jQuery element containing all selected options
beforeMoveToLeft	`function`	return `true`	Whatever you want to do with `$left`, `$right` and `$options` elements before they are moved to left. `beforeMoveToLeft: function($left, $right, $options) { ...; return Boolean; }`. `$left` - jQuery element pointing to left side `select` element `$right` - jQuery element pointing to right side `select` element `$options` - jQuery element containing all selected options Keep in mind that this function must return a boolean value. `true` will let the action to be performed `false` will stop the action
moveToLeft	`function`	return `this`	If you want to define your own `moveToLeft` functionality you can do this by defining `moveToLeft: function(Multiselect, $options, event, silent, skipStack) { ... }` `Multiselect` - current instance of multiselect `$options` - jQuery element containing all selected options `event` - the event that initialised the action `silent` - `boolean` that tells if you have to trigger `beforeMoveToRight` and `afterMoveToRight` `skipStack` - `boolean` that tells if you have to handle `undo/redo` stack
afterMoveToLeft	`function`	no action	Whatever you want to do with `$left`, `$right` and `$options` elements after they are moved to right. `afterMoveToLeft: function($left, $right, $options) { ...; }` `$left` - jQuery element pointing to left side `select` element `$right` - jQuery element pointing to right side `select` element `$options` - jQuery element containing all selected options
beforeMoveUp	`function`	return `true`	Whatever you want to do with `$options` elements before they are moved up. `beforeMoveUp: function( $options) { ...; return Boolean; }`. `$options` - jQuery element containing all selected options Keep in mind that this function must return a boolean value. `true` will let the action to be performed `false` will stop the action
afterMoveUp	`function`	no action	Whatever you want to do with `$options` elements after they are moved up. `afterMoveUp: function($options) { ...; }` `$options` - jQuery element containing all selected options
beforeMoveDown	`function`	return `true`	Whatever you want to do with `$options` elements before they are moved down. `beforeMoveDown: function( $options) { ...; return Boolean; }`. `$options` - jQuery element containing all selected options Keep in mind that this function must return a boolean value. `true` will let the action to be performed `false` will stop the action
afterMoveDown	`function`	no action	Whatever you want to do with `$options` elements after they are moved down. `afterMoveDown: function($options) { ...; }` `$options` - jQuery element containing all selected options
keepRenderingSort	`boolean`	`false`	When you want to keep options sorted as they was rendered, `keepRenderingSort` must be `true`. When `keepRenderingSort` is `true`, `sort` function will be ignored.
submitAllLeft	`boolean`	`true`	When you don’t want to send all options from the left side to server, `submitAllLeft` must be `false`.
submitAllRight	`boolean`	`true`	When you don’t want to send all options from the right side to server, `submitAllRight` must be `false`.
search	`Object`	`null`	When you want to have search fields for `left` and `right` elements you can do this by providing following value: search: { left: '<input type="text" name="q" class="form-control" placeholder="Search..." />', right: '<input type="text" name="q" class="form-control" placeholder="Search..." />', } When you want to have search field only for `left` element you can do this by providing following value: search: { left: '<input type="text" name="q" class="form-control" placeholder="Search..." />', }
fireSearch	`function`	return `true` if search length is great than 1	Tell to multiselect when to start applying the search. `fireSearch: function(value) { ...; return Boolean; }` `value` - String search entered by the user

Multiselect

Documentation

Options:

Browser Support

The following browsers are supported:

Download