Convert Multi Select Into Dual List Box - jQuery Dualselect

Just another jQuery dual list box plugin that converts a normal multiple select element into a dual select interface for easier selection.

Features:

• Moves a single or all options between 2 select boxes.
• Allows the user to quickly filter options with a search field.
• Supports the native disabled attribute.
• Highly customizable and easy to style using your own CSS.

How to use it:

1. To get started, makes sure you have the following JavaScript and CSS files loaded in the HTML document.

<link rel="stylesheet" href="/path/to/css/dualselect.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/dualselect.min.js"></script>

2. Call the function dualselect on the target select element to initialize the plugin.

<select id="example" name="languages" multiple="multiple">
  <option value="o1value" disabled>1-option</option>
  <option value="o2value">2-option</option>
  <option value="o3value">3-option</option>
  <option value="o4value" disabled>4-option</option>
  <option value="o5value">5-option</option>
  <option value="o6value">6-option</option>
  ...
</select>

const dualselect = jQuery('#example').dualselect({
      // options here
});

3. Determine whether or not to show move buttons. Default: true.

const dualselect = jQuery('#example').dualselect({
      showMoveButtons: false
});

4. Determine whether or not to move options by click. Default: true.

const dualselect = jQuery('#example').dualselect({
      moveOnSelect: false
});

5. Determine whether or not to show the search box. Default: true.

const dualselect = jQuery('#example').dualselect({
      showFilters: false
});

6. Customize the move buttons.

const dualselect = jQuery('#example').dualselect({
      selectText: '>',
      selectAllText: '>>',
      removeText: '<',
      removeAllText: '<<'
});

7. Customize the CSS class of the dual list box.

const dualselect = jQuery('#example').dualselect({
      dualselectClass: 'is-dualselect'
});

8. Customize the wrapper element.

const dualselect = jQuery('#example').dualselect({
      wrapperElement: 'div',
      wrapperClass: 'dualselect-wrapper'
});

9. Available callback functions which will be fired before you select or remove options.

const dualselect = jQuery('#example').dualselect({
      beforeSelectOption: function (_option) {
        if (_option.text().indexOf('option30') >= 0) {
          alert('option30 selection not allowed');
          return false;
        }
        return true;
      },
      beforeRemoveOption: function (_option) {
        if (_option.text().indexOf('option25') >= 0) {
          alert('option25 removal not allowed');
          return false;
        }
        return true;
      }
});

10. Destroy the instance.

dualselect.destroy();

11. Re-initialize the dual list box in cases where options are updated or new options are added.

dualselect.resync();

---

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