Dual Listbox

Dual Listbox is 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.

For more info please visit the plugin's GitHub..

Basic

We need select tag with multiple attribute to insilize dual listbox.

Code Example

<select id="basic-listbox" class="dual-listbox" multiple>  <option value="1">Cheese</option>  <option value="2">Egg</option>  <option value="3">Butter</option>  <option value="4">Margarine</option>  <option value="5">Yogurt</option>  <option value="6">Pizza</option>  <option value="7">Steak</option>  <option value="8">Kebab</option>  <option value="9">Sandwich</option>  <option value="10">Hamburger</option></select>

With Custom Labels

To set custom labels please check this section of github page. you can use html codes as value.

Code Example

<select id="custom-labels-listbox" class="dual-listbox" multiple>  <option value="1">Cheese</option>  <option value="2">Egg</option>  <option value="3">Butter</option>  <option value="4">Margarine</option>  <option value="5">Yogurt</option>  <option value="6">Pizza</option>  <option value="7">Steak</option>  <option value="8">Kebab</option>  <option value="9">Sandwich</option>  <option value="10">Hamburger</option></select>

Pre Selected

You need to use selected attribute in option tags.

Code Example

<select id="preselected-listbox" class="dual-listbox" multiple>  <option value="1">Cheese</option>  <option value="2" selected>Egg</option>  <option value="3">Butter</option>  <option value="4">Margarine</option>  <option value="5">Yogurt</option>  <option value="6" selected>Pizza</option>  <option value="7">Steak</option>  <option value="8">Kebab</option>  <option value="9">Sandwich</option>  <option value="10">Hamburger</option></select>

No Search Option

Please check js part of code example blew. you need to add this class .dual-listbox__search--hidden in search option.
you can also check this section of github page

Code Example

<select id="nosearch-listbox" data-search="false" class="dual-listbox" multiple>  <option value="1">Cheese</option>  <option value="2">Egg</option>  <option value="3">Butter</option>  <option value="4">Margarine</option>  <option value="5">Yogurt</option>  <option value="6">Pizza</option>  <option value="7">Steak</option>  <option value="8">Kebab</option>  <option value="9">Sandwich</option>  <option value="10">Hamburger</option></select>

Code Example

// JAVASCRIPT CODElet nosearchListbox = new DualListbox('#nosearch-listbox');    nosearchListbox.search_left.classList.add('dual-listbox__search--hidden');    nosearchListbox.search_right.classList.add('dual-listbox__search--hidden');