multiSelect.js ✨

Simple multi-select pure vanilla Javascript library. 🚀 Live Demo v1.0.8

multiSelect.js is a simple, pure vanilla Javascript library that's progressively designed for easy integration for any type of project or system. The design was heavily influenced by that of the Bootstrap and Semantic-UI multi-select elements.

Features

• Pure Vanilla Javascript
• Zero Dependencies
• Simple & Easy to use
• Extremely Lightweight
• Blazing Fast
• Versatile

Installation

• CDN

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kleimaj/[email protected]/css/style.min.css">

JS

<script src="https://cdn.jsdelivr.net/npm/@kleimaj/[email protected]/js/multiselect.min.js"></script>

<select class="multi">
        <option value="" disabled selected>Select your option</option>
        <option value="Bananas">Bananas</option>
        <option value="Apples">Apples</option>
        <option value="Peaches">Peaches</option>
</select>

It's essential that you name the class multi and set an initial option to selected, disabled, this will act as the placeholder value.

• To get the values of the multi-select, you can do the following:

const vals = document.querySelector('.multi').value;
console.log(vals); // "Banana,Apples,..."
// parse as an array
vals.split(','); // [Bananas, Apples, ...]

Reinitialization

• By default, multiSelect elements will be initialized on page ready. However if you're using an async script, you may add multis after the page load by invoking multiSelect() or window.multiSelect.refresh(). This will initialize any new .multi elements that have not yet been created.

Special thanks to Hirbod for bringing this Issue (#1) to my attention.

Support

For general questions about autoComplete.js, tweet at @kleimaj.

For technical questions, you should post a question on Stack Overflow and tag it with multiSelect.js.

---

Author

Jacob Kleiman

• Email: [email protected]
• Website: https://jacobkleiman.com/
• Github: https://github.com/kleimaj/

Distributed under the MIT license. See MIT for more information.

---