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:

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

2. 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');

3. Here is a list of all default options that can be overwritten to customize the dual list box.

new DualListbox("#select", {
    availableTitle: "Different title",
    selectedTitle: "Different title",
    addButtonText: ">",
    removeButtonText: "<",
    addAllButtonText: ">>",
    removeAllButtonText: "<<",
    sortable: true,
    upButtonText: "ᐱ",
    downButtonText: "ᐯ",
    draggable: true,
    // add more options here
    options: [
      { text: "Option 1", value: "OPTION1" },
      { text: "Option 2", value: "OPTION2" },
      { text: "Selected option", value: "OPTION3", selected: true },
    ],
    // events
    addEvent: function (value) {
      console.log(value);
    },
    removeEvent: function (value) {
      console.log(value);
    },
});

4. Event handlers.

dualListbox.addEventListener("added", function (event) {
  console.log(event);
  console.log(event.addedElement);
});
dualListbox.addEventListener("removed", function (event) {
  console.log(event);
  console.log(event.removedElement);
});

Changelog:

v2.0.0 (09/30/2022)

• Drag and drop support.
• Better ordering.
• Single list of options.

v1.4.0 (09/29/2022)

• Added 2 search boxes
• Reworked the drag drop. Now works on multiple browsers

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.