Searchable Multi-select Dropdown Plugin With jQuery - Dropdown.js

Searchable Multi-select Dropdown Plugin With jQuery - Dropdown.js
File Size: 83 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

The Dropdown.js jQuery plugin converts the normal select box into a fast, performant, dynamic, multi-select dropdown list for better UX.

Key features:

  • Supports 'token' mode which can be used to create a tag/token manager;
  • Supports optgroup;
  • Supports native select operations;
  • Supports both JSON and option data sources.
  • Cross-browser and easy to use.

How to use it:

1. Import jQuery library and the jQuery Dropdown.js plugin's files into the html document.

<script src="//"></script>
<link rel="stylesheet" href="jquery.dropdown.css">
<script src="jquery.dropdown.js"></script>

2. Create a normal select box with 'display:none' CSS property.

<div class="demo">
  <select style="display:none"  name="" multiple>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="3" selected>Selected</option>
    <option value="4" disabled>Disabled</option>
    <option value="5">5</option>
    <option value="6">6</option>

3. Enable the plugin by calling the function on the top container as this:

  // options here

4. You're also allows to dynamically render the options data using JSON & JS array:

<div class="demo">
  <select style="display:none" name="" id="" multiple></select>
  data: [//data here]

5. Convert the select box into a tag/token manager.

  multipleMode: 'label'

6. All default customization options:


  // read only
  readOnly: false,

  // the maximum number of options allowed to be selected
  limitCount: Infinity,

  // search field
  input: '<input type="text" maxLength="20" placeholder="Search">',

  // dynamic data here
  data: [],

  // is search able?
  searchable: true,

  // when there's no result
  searchNoData: '<li style="color:#ddd">No Results</li>',

  // callback
  choice: function () {}


Change logs:


  • Fixed: Cannot read property 'toLowerCase' of undefined


  • v1.2


  • support capital and small letter by search


  • bugfixed


  • v1.1.6


  • bugfix


  • fix some bug


  • v1.1.4: bugfix


  • bugfixed


  • fixed for IE8


  • version 1.1.0

This awesome jQuery plugin is developed by Janking. For more Advanced Usages, please check the demo page or visit the official website.