Pure JS Dual List Box Component

Category: Form , Javascript | October 10, 2019
Author: maykinmedia
Views Total: 6,483 views
Official Page: Go to website
Last Update: October 10, 2019
License: MIT


Pure JS Dual List Box Component


A pure JavaScript plugin that converts the normal select box into a searchable dual list box where the users are able to move options between two selection panels.

How to use it:

Add the stylesheet ‘dual-listbox.css’ and JavaScript file ‘dual-listbox.js’ to the webpage.

<link href="dist/dual-listbox.css" rel="stylesheet">
<script src="dist/dual-listbox.js"></script>

Initialize the DualListbox on the target select box and done.

<select class="demo" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">Eight</option>
  <option value="9">Nine</option>
  <option value="10">Ten</option>
demo = new DualListbox('.selectDemo');

Default options that can be overwritten to customize the dual list box.

  addEvent: function(value) {
  removeEvent: function(value) {
  availableTitle: 'Different title',
  selectedTitle: 'Different title',
  addButtonText: '>',
  removeButtonText: '<', addAllButtonText: '>>',
  removeAllButtonText: '<<',
  options: [
      {text:"Option 1", value: "OPTION1"},
      {text:"Option 2", value: "OPTION2"},
      {text:"Selected option", value: "OPTION3", selected:true}


v1.3.0 (10/10/2019)

  • Updated

v1.2.0 (05/22/2018)

  • Added the options to not show the buttons.

You Might Be Interested In:

3 thoughts on “Pure JS Dual List Box Component

  1. Badu

    this is brilian,
    but can you disable auto sorting the end result ?


Leave a Reply