Pure JS Dual List Box Component

Category: Form , Javascript | August 8, 2017
Author: maykinmedia
Views Total: 166
Official Page: Go to website
Last Update: August 8, 2017
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:

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: 'Available options',
  selectedTitle: 'Selected options',
  addButtonText: 'add',
  removeButtonText: 'remove',
  addAllButtonText: 'add all',
  removeAllButtonText: 'remove all',
  searchPlaceholder: 'search'     
});