jQuery Plugins › jQuery Form Plugins › jQuery multiselect.js

Two-side Multi Select Plugin with jQuery - multiselect.js

File Size: 123 KB
Views Total: 102700
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE8+, FireFox, Opera, Safari#Bootstrap#Multiple Select#Dual List Box
Two-side Multi Select Plugin with jQuery - multiselect.js

multiselect.js is a jQuery plugin that converts a multiple select into two-side select boxes so the users can move items between two boxes by selecting items(s) and clicking on arrow buttons. Compatible with Bootstrap 3 framework.

See also:

Installation:

# NPM
$ npm install multiselect-two-sides

# Bower
$ bower install multiselect-two-sides

How to use it:

1. Load Twitter's Bootstrap's stylesheet in the header.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

2. Load jQuery library, Bootstrap's JS and the jQuery multiselect.js script at the bottom of the html page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/multiselect.js"></script>

3. Create a two sided select list as follow:

<div class="row">
  <div class="col-xs-5">
    <select name="from" id="multiselect" class="form-control" size="8" multiple="multiple">
      <option value="1">C++</option>
      <option value="2">C#</option>
      <option value="3">Haskell</option>
      <option value="4">Java</option>
      <option value="5">JavaScript</option>
      <option value="6">Lisp</option>
      <option value="7">Lua</option>
      <option value="8">MATLAB</option>
      <option value="9">NewLISP</option>
      <option value="10">PHP</option>
      <option value="11">Perl</option>
      <option value="12">SQL</option>
      <option value="13">Unix shell</option>
    </select>
  </div>
  <div class="col-xs-2">
    <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
    <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
    <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
    <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
  </div>
  <div class="col-xs-5">
    <select name="to" id="multiselect_to" class="form-control" size="8" multiple="multiple">
    </select>
  </div>
</div>

4. Initialize the plugin with default options.

$('#multiselect').multiselect();

5. Plugin options available.

  • right: The select where the options are moved to
  • rightSelected: The button that moves selected options from left to right
  • rightAll: multiselect_id_rightAll The button that moves all options from left to right
  • leftSelected: The button that moves selected options from right to left
  • leftAll: The button that moves all options from right to left
  • undo: The button that triggers the undo action
  • redo: The button that triggers the redo action
  • moveUp: The button that move options from right side to the top
  • moveDown: The button that move options from right side to the bottom
  • startUp: 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: Will sort options when an action happend into right or left elements.
  • beforeMoveToRight: Whatever you want to do with $left, $right and option[s] 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
  • moveToRight: If you want to define your own moveToRight functionality you can do this by defining moveToRight: function(Multiselect, options, event, silent, skipStack) { ... }. options - HTML 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: Whatever you want to do with $left, $right and option[s] elements after they are moved to right.
  • beforeMoveToLeft: Whatever you want to do with $left, $right and option[s] 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
  • moveToLeft : If you want to define your own moveToLeft functionality you can do this by defining moveToLeft: function(Multiselect, options, event, silent, skipStack) { ... }.. options - HTML element containing all selected options. event - the event that initialised the action. silent - boolean that tells if you have to trigger beforeMoveToLeft and afterMoveToLeft. skipStack - boolean that tells if you have to handle undo/redo stack
  • afterMoveToLeft: Whatever you want to do with $left, $right and option[s] elements after they are moved to left.
  • beforeMoveUp: Whatever you want to do with $options elements before they are moved up.
  • afterMoveUp: Whatever you want to do with $options elements after they are moved up.
  • beforeMoveDown: Whatever you want to do with $options elements before they are moved down.
  • afterMoveDown: Whatever you want to do with $options elements after they are moved down.
  • keepRenderingSort: 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: When you don’t want to send all options from the left side to server, submitAllLeft must be false.
  • submitAllRight: When you don’t want to send all options from the right side to server, submitAllRight must be false.
  • search: When you want to have search fields for left and right elements
  • fireSearch: Tell to multiselect when to start applying the search.

Changelog:

2022-02-15

  • Fix Safari detection

2021-09-16

  • Removed return before call to self.callbacks.moveToRight. The return prevents the function from continuing with the rest of the code in the method such as calling the afterMoveToRight.
  • Moved the code calling the beforeMoveToRight before the call to moveToRight.
  • Performed similar actions in moveToLeft function.

v2.5.7 (2020-05-06)

  • Upgrade dev dependencies

v2.5.5 (2018-07-25)

  • Fixed: :visible selector is not working on safari, use :not(.hidden) (beebfe0)
  • Fixed: ignoreDisabled: true does not work with optgroups

v2.5.4 (2018-07-24)

  • Bugfix Searching and Adding elements cause the already selected elements to get added as a hidden element; 
  • Bugfix :visible selector is not working on safari, use :not(.hidden)

2018-07-17

  • v2.5.4: Bugfix Searching and Adding elements cause the already selected elements to get added as a hidden element

2018-07-16

  • v2.5.3: Fixed ignoreDisabled: true does not work with optgroups

2018-07-10

  • v2.5.2: Fixed invalid regular expression.

2018-04-27

  • v2.5.1

2018-02-06

  • v2.5.0: feat: now we can have different sort functions for left and right

2018-01-13

  • v2.4.1: Multiple select with 'shift' button on Firefox

2017-10-16

  • v2.4.0: Handle click on optgroup

2017-08-30

  • v2.3.13: Search improvements; allows to edit moveFromAtoB function

2017-05-02

  • Add new callbacks: before/after move up/down

2017-04-26

  • Add new callbacks: before/after move up/down

2017-04-12

  • mShow/nHide in Safari

2017-03-21

  • Search by regex and keep rendering sort when having optgroup's

2017-03-19

  • Optgroup bugfix

2017-03-18

  • v2.3.6: Add moveFromAtoB - in this order we do the same thing when moving options from one side to another

2017-01-24

  • v2.3.2: Option to set minimum length for search filter activation; Update multiselect.min.js to include feature to specify which attribute to match optgroup

2016-12-05

  • v2.3.1: Add filtering for lists with optgroup + Allow move up/down to work within optgroups

2016-09-13

  • v2.3.1: Add filtering for lists with optgroup + Allow move up/down to work within optgroups

2016-08-27

  • First version of move up/down buttons for right side select options

2016-07-07

  • bugfix

2016-06-30

  • Set as version 2.2.8

2016-06-07

  • Fixed: Using optgroups breaks keepRenderingSort

2016-03-31

  • Change the behaviour of hide/show functions only if browser is IE

2016-03-16

  • Fixed js objects for IE support - minify

2016-03-14

  • Make search case insensitive

2016-02-26

  • submitAllRight bugfix

2016-02-03

  • Hide options when search

2016-01-26

  • Fixed Search functionality not working in any version of IE

2015-10-27

  • Search: add regex search

2015-10-01

  • Enable search options

2015-09-28

  • Add submitAllLeft and submitAllRight options

2015-06-01

  • Keep render sort for right side

2015-05-29

  • .attr replaced with .prop - in some versions of firefox a bug occurs

2015-05-13

  • Allow user to define moveToLeft and moveToRight
  • Multiple destinations: bugfix when there are already options in right sides.

2015-04-27

  • Origin data in right select is not in request parameter - BUGFIX

This awesome jQuery plugin is developed by crlcu. For more Advanced Usages, please check the demo page or visit the official website.