jQuery Plugins › jQuery Form Plugins › jQuery multiselect.js

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

File Size:	123 KB
Views Total:	99433
Last Update:	02/15/2022 13:19:00 UTC
Publish Date:	04/05/2015 05:49:00 UTC
Official Website:	Go to website
License:	MIT

Demo Download

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.

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

See also:

Installation:

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review