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