Pure JS Dual List Box Component

Category: Form , Javascript | April 11, 2022
Views Total:687 views
Official Page:Go to website
Last Update:April 11, 2022


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.4.0 (04/11/2022)

  • 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.

You Might Be Interested In:

4 thoughts on “Pure JS Dual List Box Component

  1. Badu

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

  2. Filip Gojković

    demo = new DualListbox(‘.selectDemo’);

    this is wrong and it doesn’t work because class is demo and not selectDemo


Leave a Reply