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

    multiselect-dropdown

    2.0.2 • Public • Published

    mutiselect-dropdown

    Project website

    https://www.destesoft.com/multiselect-dropdown

    A JavaScript control to replace the native HTML multiselect element

    This control replaces an HTMLSelect element with a similar dropdown, which will include a checkbox in each option, to allow multiple selection using an inline control.

    This is a standalone control, so it doesn't require any other plugin, unless you need to implement a polyfill for older browsers.

    It should work in any modern browser. As it uses some ES6 characteristics, it is recommended to use polyfills if required in deprecated browsers.

    The styles of the element are based on Google Chrome's <select> UI, which are pretty simple. It shouldn't be a problem to adapt it to your own styles.

    Usage

    Adding required files to your project

    Import the multiSelect class from the package in your scripts:

    import multiSelect from 'multiselect-dropdown';

    If you need it as a regular <script> tag, simply use the multiselect-dropdown.min.js file located inside the package source.

    <script src="[node_modules]/multiselect-dropdown/multiselect-dropdown.min.js"></script>

    You can copy the file to a directory in your project source.

    Add the multiselect-dropdown.css stylesheet. If using a bundler like webpack, you can import it to the main script module:

    import 'multiselect-dropdown/multiselect-dropdown.css';

    If using a CSS transpiler, like SASS, you can also import it to the main stylesheet:

    @import '~multiselect-dropdown/multiselect-dropdown.css';

    Or, if you need it as a regular <link> tag, just import the file directly to your web page.

    <link rel="stylesheet" href="[node_modules]/multiselect-dropdown/multiselect-dropdown.css">

    Creating the dropdown object

    For any <select> element, just create an instance of the multiSelect class:

    const dropdown = new multiSelect(
        document.getElementById("test-select"), // target element
        {className: '', maxVisibleOptions: 0}   // options
    );

    The multiselect control will have the same classes of the select at the moment of calling this function.

    The text displayed in the control will be the labels of the checked options, comma-separated. This will be updating when moving out of the control, at the moment the options list is hidden. At the same time, any listener for the change event of the original select control will be triggered.

    Each time an option is checked, it will update the original select element, allowing to get the values from that same element.

    Options

    The options parameter is not required.

    className

    Custom class list separated by space to add to the multi-select control.

    maxVisibleOptions

    Max number of visible items in the options container. If unset or 0, the element's maximum size will be determined by the element's position and viewport size.

    Reset options

    To change the options of the current control, call the setConfig function from the muti-select object.

    dropdown.setConfig(
        {
            className: 'new-class',
            maxVisibleOptions: 3
        }
    );

    Reload

    If the <select> options are changed, calling the reload function from the multi-select object will update the options list.

    dropdown.reload();

    Install

    npm i multiselect-dropdown

    DownloadsWeekly Downloads

    320

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    35 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar