Filterable & Checkable Multi-Select Dropdown In JavaScript

Category: Form , Javascript | June 24, 2021
Author: admirhodzic
Views Total: 908 views
Official Page: Go to website
Last Update: June 24, 2021
License: MIT

Preview:

Filterable & Checkable Multi-Select Dropdown In JavaScript

Description:

A lightweight, framework-agnostic JavaScript library for creating enhanced multi-select dropdowns.

It converts the native select box into a filterable and checkable dropdown list and displays the selected options as tags/tokens on the page.

How to use it:

1. Load the main script multiselect-dropdown.js in the document.

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

2. Assign a unique ID to the multi-select element and the library will do the rest.

<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 live search functionality.

<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 enables the user to select all options.

<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 number of results to display.

<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>

You Might Be Interested In:


Leave a Reply