Pure JS Dual List Box Component

Preview:

Description:

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>
</select>

demo = new DualListbox('.selectDemo');

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

DualListbox('.selectDemo',{
  addEvent: function(value) {
      console.log(value);
  },
  removeEvent: function(value) {
      console.log(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}
  ]
});

Changelog:

09/13/2021

• Added 2 search boxes

v1.3.1 (02/01/2021)

• Fix enter key not submitting when focussed on another form input

v1.3.0 (10/10/2019)

• Updated

v1.2.0 (05/22/2018)

• Added the options to not show the buttons.