jQuery Based Multi Select Enhancement Plugin - multiselectsplitter.js

multiselectsplitter.js is a jQuery & Bootstrap plugin use for splitting a regular multi select containing several option groups into two select boxes for easier option selection.

How to use it:

1. Load the Bootstrap's style sheet in the header of the webpage.

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

2. Create a 'multiple' select element and group related options using optgroup tag as follow:

<select id="example" multiple="multiple">
  <optgroup label="Category 1">
    <option value="1">Choice 1</option>
    <option value="2" selected="selected">Choice 2</option>
    <option value="3">Choice 3</option>
    <option value="4">Choice 4</option>
  </optgroup>
  <optgroup label="Category 2">
    <option value="5">Choice 5</option>
    <option value="6">Choice 6</option>
    <option value="7">Choice 7</option>
    <option value="8">Choice 8</option>
  </optgroup>
  <optgroup label="Category 3">
    <option value="9">Choice 9</option>
    <option value="10">Choice 10</option>
    <option value="11">Choice 11</option>
    <option value="12">Choice 12</option>
  </optgroup>
</select>

3. Load the bootstrap-multiselectsplitter.js after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="bootstrap-multiselectsplitter.js"></script>

4. Initialize the plugin with default options.

$('#example').multiselectsplitter();

5. Default customization options.

$('#example').multiselectsplitter({
  // size of new selects
  selectSize: null,

  // max size of new selects
  maxSelectSize: null,

  // second select will be cleared when the first changes
  clearOnFirstChange: false,

  // only options from one optGroup can be selected
  onlySameGroup: false,   // only if multiselect

  // shows how many options are selected
  groupCounter: false,    // only if multiselect

  // how many options can be selected
  maximumSelected: null,  // only if multiselect, integer or function
});

6. Callbacks & functions.

$('#example').multiselectsplitter({
  // called after initialization
  // 2 arguments ($firstSelect, $secondSelect)
  afterInitialize: null,

  // called when selected more than 'maximumSelected' options
  maximumAlert: function (maximumSelected) {
      alert("Only " + maximumSelected + " values can be selected");
  },

  // used for creating option in first select
  createFirstSelect: function (label, $originalSelect) {
      return '<option>' + label + '</option>';
  },

  // used for creating option in second select
  createSecondSelect: function (label, $firstSelect) {
      return '<option>' + label + '</option>';
  },
});

7. Customize the template in the JavaScript.

$('#example').multiselectsplitter({
  template: '<div class="row" data-multiselectsplitter-wrapper-selector>' +
  '<div class="col-xs-6 col-sm-6">' +
  '<select class="form-control" data-multiselectsplitter-firstselect-selector></select>' +
  '</div>' +
  ' <!-- Add the extra clearfix for only the required viewport -->' +
  '<div class="col-xs-6 col-sm-6">' +
  '<select class="form-control" data-multiselectsplitter-secondselect-selector></select>' +
  '</div>' +
  '</div>'
});

Change log:

2016-10-25

• Added functions for disabling/enabling

---

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