Dual Listbox | DashLite Admin Template

Components

## 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 CODE
    let nosearchListbox = new DualListbox('#nosearch-listbox');
        nosearchListbox.search_left.classList.add('dual-listbox__search--hidden');
        nosearchListbox.search_right.classList.add('dual-listbox__search--hidden');

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State