Have ideas to improve npm?Join in the discussion! »

    faded-multiselect

    0.9.3 • Public • Published

    faded-multiselect

    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

    Features

    • 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>
    </select>
    

    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

    multiselect.refresh();
    

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

    multiselect.getValue();
    

    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.

    multiselect.destroy();
    

    Options

    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
    });
    

    Demo

    You can view a demo here

    Dependency

    To-do

    • Search functionality
    • Auto sort selected items to the top

    Install

    npm i faded-multiselect

    DownloadsWeekly Downloads

    1

    Version

    0.9.3

    License

    GPL-3.0

    Unpacked Size

    41.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar