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 callbacks 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
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

The following browsers are supported: