Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


npm version npm downloads Bower version
Build Status Code Climate Coverage Status
Dependency Status devDependency Status peer Dependency Status
Built with Grunt License

A simple skinnable multi-select dropdown for web


  • An easy to use multi-select dropdown that works out of the box with a simple function invocation.
  • Can be easily themed for any host application

How to Use

Include faded-multiselect.min.js script file and fade-multiselect.css stylesheet along with jQuery in the HTML page.

Create an HTML multiselect as below:

<select multiple id="select-to-be-tested">
    <option value="option1" selected>Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>

Instantiate a multiselect dropdown on the select as below:

multiselect = new FadedMultiselect("#select-to-be-tested");

When the HTML select changes (addition or removal of options), just invoke refresh() on the multiselect as


In order to get an array of selected options, call getValue() on the multi-select as


When the multi-select is no longer required, call a destroy() on the multi-select and the original multi-select will be brought back on the page.



For an internal Select All and Unselect All option, initialize the multi-select as

multiselect = new FadedMultiselect("#select-to-be-tested", {
    allOption: true

To be notified on every value change, supply a function to be invoked on every state change as shown below

multiselect = new FadedMultiselect("#select-to-be-tested", {
    onStateChange: function (value, item) {
        // Use 'value' to track the current selection
        // Use 'item' to track the currently toggled item

To set a custom dropdown button text, supply a function that returns the button text on a particular selection as shown below

multiselect = new FadedMultiselect("#select-to-be-tested", {
    buttonText: function (value) {
        // Use 'value' to get an array of selection in the dropdown

To limit the dropdown height, supply maxDropdownHeight and a skinnable scrollbar will be used within the dropdown

multiselect = new FadedMultiselect("#select-to-be-tested", {
    maxDropdownHeight: 200


You can view a demo here



  • Search functionality
  • Auto sort selected items to the top