Pure JS Dual List Box Component

Category: Form , Javascript | September 30, 2022
Author:maykinmedia
Views Total:3,081 views
Official Page:Go to website
Last Update:September 30, 2022
License:MIT

Preview:

Pure JS Dual List Box Component

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.

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 ?

    Reply
  2. Filip Gojković

    demo = new DualListbox(‘.selectDemo’);

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

    Reply

Leave a Reply