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