Registry / web-framework / multiselect-dropdown

multiselect-dropdown

library2.0.2jsnpmunverified

A lightweight, dependency-free multi-select dropdown control that replaces a standard HTML select element with rich features like search/filter, checkboxes, limit display, and custom styling. Current stable version 2.0.2 is released irregularly with incremental fixes. Key differentiators: pure JavaScript/ES module with no dependencies, minified standalone script for direct browser use, and support for both ESM (ES6 class) and UMD/global patterns. Suitable for simple multi-select needs without heavy frameworks.

web-framework

npm install multiselect-dropdown

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · MULTISELECT-DROPDO

multiselect-dropdown

web-frameworkjavascriptv2.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MultiselectDropdown

✓ import MultiselectDropdown from 'multiselect-dropdown'

✗ const MultiselectDropdown = require('multiselect-dropdown')

Default import of ES6 class since v2.0.0. CJS require not supported (package is type: module).

MultiselectDropdown

✓ <script src="multiselect-dropdown/dist/multiselect.min.js"></script> Then use global: new MultiselectDropdown(element, options)

✗ <script src="multiselect-dropdown/index.js"></script>

For browser script tag, use dist/multiselect.min.js. The main entry is ESM and won't work directly.

MultiselectDropdown

✓ import MultiselectDropdown from 'multiselect-dropdown'

✗ import { MultiselectDropdown } from 'multiselect-dropdown'

Named export is not available. Use default import.

Shows creating a multi-select dropdown from a <select> element with options like placeholder, limit, search, select-all, and change callback.

// Install: npm install multiselect-dropdown import MultiselectDropdown from 'multiselect-dropdown'; // HTML: <select id="mySelect" multiple> // <option value="1">Option 1</option> // <option value="2">Option 2</option> // <option value="3">Option 3</option> // </select> const element = document.getElementById('mySelect'); const dropdown = new MultiselectDropdown(element, { placeholder: 'Select options', maxItems: 5, search: true, selectAll: true, onChange: function(values) { console.log('Selected:', values); } }); // To destroy: dropdown.destroy();

Debug

Known issues

breakingv2.0.0 switched to ES module (type: module). CommonJS require() will fail.

fix

Use import statement or switch to script tag with dist/multiselect.min.js.

affects: >=2.0.0

breakingv2.0.0 class name changed from MultiselectDropdown to MultiselectDropdown (same) but now exported as default only.

fix

Use import MultiselectDropdown from 'multiselect-dropdown' instead of named import.

affects: >=2.0.0

gotchaThe package does not include TypeScript type definitions.

fix

Create a .d.ts file or use @ts-ignore. Consider contributing types to DefinitelyTyped.

affects: <=2.0.2

gotchaSearch functionality requires adding the 'search' option explicitly; it is not enabled by default.

fix

Set search: true in the options object.

affects: >=2.0.0

deprecatedThe 'onItemSelect' event was removed in v2.0.0. Use 'onChange' instead.

fix

Replace onItemSelect with onChange callback.

affects: >=2.0.0

Errors

Common errors & fixes

Uncaught SyntaxError: The requested module 'multiselect-dropdown' does not provide an export named 'MultiselectDropdown'

Using named import ( { MultiselectDropdown } ) instead of default import.

fix

import MultiselectDropdown from 'multiselect-dropdown';

Error: Cannot find module 'multiselect-dropdown'

Package not installed or path incorrect.

fix

Run 'npm install multiselect-dropdown' or verify node_modules.

TypeError: MultiselectDropdown is not a constructor

Using require() in ESM environment or wrong import style.

fix

Use ES6 import: import MultiselectDropdown from 'multiselect-dropdown';

ReferenceError: MultiselectDropdown is not defined

Script tag not loaded or using global in module environment.

fix

Use <script src="path/to/multiselect.min.js"></script> before your script.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/israel-munoz/multiselect-dropdown ↗

packagehttps://www.npmjs.com/package/multiselect-dropdown ↗

homepagehttps://www.destesoft.com/multiselect-dropdown ↗