logo logo-dark
logo logo-dark
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.

Available options
  • Hamburger
  • Sandwich
  • Kebab
  • Steak
  • Pizza
  • Yogurt
  • Margarine
  • Butter
  • Egg
  • Cheese
Selected options
    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.

    Source Options
    • Hamburger
    • Sandwich
    • Kebab
    • Steak
    • Pizza
    • Yogurt
    • Margarine
    • Butter
    • Egg
    • Cheese
    Destination Options
      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.

      Available options
      • Hamburger
      • Sandwich
      • Kebab
      • Steak
      • Yogurt
      • Margarine
      • Butter
      • Cheese
      Selected options
      • Pizza
      • Egg
      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

      Available options
      • Hamburger
      • Sandwich
      • Kebab
      • Steak
      • Pizza
      • Yogurt
      • Margarine
      • Butter
      • Egg
      • Cheese
      Selected options
        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.classList.add('dual-listbox__search--hidden');
        © 2023 DashLite. Template by Softnio