Sortable Dual List Box In jQuery - multiselect.sortable.js

A jQuery multiple select plugin that turns a normal select element into a sortable dual list box, where you can swap options between two side-by-side selection lists.

See Also:

• 10 Best Dual List Box Plugins In JavaScript
• 10 Best Multiple Select Plugins

How to use it:

1. Load the needed jQuery library and jQuery UI (for sortable function) in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Load the multiselect-sortable plugin's files.

<script src="assets/js/jquery.multiselect.sortable.js"></script>
<link rel="stylesheet" href="assets/css/jquery.multiselect.sortable.js.css" />

3. Add the multiselectsortable class to your multiple select and define the pre-selected options using the selected attribute:

<select name="multiselectsortable" class="multiselectsortable demo" multiple>
  <option value="1" selected disabled>jQuery</option>
  <option value="2" selected disabled>Script</option>
  <option value="3" disabled>Google.com</option>
  <option value="4" selected>Facebook.com</option>
  <option value="5" selected>Twitter.com</option>
  <option value="6" selected>Instagram.com</option>
  <option value="7" selected>Yahoo.com</option>
</select>

4. Call the function on the select element and the plugin will do the rest.

jQuery(function($){
  $('.multiselectsortable').multiselect_sortable();
})

5. Customize the titles of the dual list box.

jQuery(function($){
  $('.multiselectsortable').multiselect_sortable({
    selectable:{
      title:'Disabled',
      sortable:true,
    },
    selection :{
      title:'Selected',
      sortable:true
    },
    reverse:true
  });
})

6. Get the selected items.

var a = $('.demo').val()
console.log(a)

Changelog:

2022-12-04

• v1.0.1

---

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