Filterable Multiselect Dropdown in Pure JavaScript

Multiple Select Dropdown is Pure JavaScript, No Dependencies, Dropdown List with Multi-Select Capability.

It converts the original selection box into a filterable and checkable dropdown list and displays the selected options as tags/icons on the page.

Must Read: Configurable Multiple Column Dropdown Box Based on Twitter Bootstrap

How to make use of it:

1. Load the primary script multiselect-dropdown.js within the doc.

<script src="multiselect-dropdown.js" ></script>

2. Assign a singular ID to the multi-select component and the library will do the remaining.

<select name="cars" id="cars" multiple>
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

3. Enable the reside search performance.

<select name="cars" id="cars" multiple multiselect-search="true">
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

4. Display a check-all checkbox that permits the consumer to pick all choices.

<select name="cars" id="cars" multiple multiselect-select-all="true">
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

5. Determine the variety of results to show.

<select name="cars" id="cars" multiple multiselect-max-items="3">
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

Read More – 

Easy-to-Use Multi-Selection Plugin for Bootstrap 5/4 | BsMultiSelect
Simple Multi-select Component With Items Displayed In A Table | vue-gridmultiselect


See Demo And Download

Official Website(admirhodzic): Click Here

This superior jQuery/javascript plugin is developed by admirhodzic. For extra Advanced Usage, please go to the official website.

Share