🍦 ✨ Simple multi-select pure vanilla Javascript library.

Last update: Mar 15, 2022

Overview

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

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

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

A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" 🔍 The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Oct 30, 2022

proxy 🦄 yxorp is your Web Proxy as a Service (SAAS) Multi-tenant, Multi-Threaded, with Cache & Article Spinner

proxy 🦄 yxorp is your Web Proxy as a Service (SAAS) Multi-tenant, Multi-Threaded, with Cache & Article Spinner. Batteries are included, Content Spinning and Caching Engine, all housed within a stunning web GUI. A unique high-performance, plug-and-play, multi-threaded website mirror and article spinner

Dec 30, 2022

A JavaScript library for creating "select-all" checkboxes

SelectAllCheckbox v1.0 See LICENSE for this software's licensing terms. SelectAllCheckbox is a JavaScript library which makes it easy to create "selec

Jul 27, 2021

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Jul 19, 2022

Lightweight and simple notification library in Vanilla JavaScript.

SimpleNotification SimpleNotification is a library to display simple yet customizable notifications. You can stylize text with a simple syntax, add bu

Dec 11, 2022

A very simple JavaScript library written in vanilla js for scrambling text.

Scrambling Text A very simple JavaScript library written in vanilla js for scrambling text. Demo Page Table of Contents Installation Examples Basic Ex

Dec 7, 2022

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Apr 13, 2022

Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags.

jquery.picky.js Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags. Features Instead of g

Apr 25, 2021

Pure and simple virtual DOM library

Maquette Maquette is a Javascript utility which makes it easy to synchronize the DOM tree in the browser with your data. It uses a technique called 'V

Jan 4, 2023

Comments

Provide a refresh method

Hi,

I am loading parts of my content async. Your library does not have any global trigger / reinit function. Could you provide one? Maybe exposed to the window namespace?

window.multiSelect.refresh()

It should only detect newly, uninitialized elements. You might just want to add a data-multiselect-initialized="true" and do a querySelect where this data-tag is false and retrigger your code?

I would also suggest you don't bind it fixed to "multi", provide a class constructor to pass a selector to it.

Thanks for your effort.

opened by hirbod 3

Releases(1.0.8)

1.0.8(Nov 18, 2020)

Thanks to @Hirbod from Issue #1 for inquiring about creating a refresh method. If you are using async scripts, or want to be able to dynamically add multiselect elements later on, go ahead and call multiSelect() or window.multiSelect.refresh() to initialize newly appended .multi class elements. Refrain from using document.body.innerHTML as this removes the event listeners from the multiselect element buttons. Feel free to contribute to this project, or voice your comments in the issues, and I will get back to you right away.

Cheers Jacob
Source code(tar.gz)
Source code(zip)
1.0.7(Oct 26, 2020)

This added block element modifiers to the css and min.css, to prevent outside styles from leaking into the package.
Source code(tar.gz)
Source code(zip)

Owner

Jacob Kleiman

Find the flow

GitHub

VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

103 Dec 16, 2022

Pure JavaScript (VanillaJS) dropdown menu, with multiple select and searching support

JS Select Pure JavaScript (VanillaJS) dropdown menu, with multiple select and searching support How to use To use the select plugins, two main file mu

4 Mar 17, 2022

Better select widgets in vanilla javascript.

Select Better select widgets in vanilla javascript. The code is intentionally very simple and close to browser defaults. Usage <link rel="stylesheet"

2 Jun 17, 2022

A jQuery Single/Multi Select plugin which can be used on almost any device

jquery.sumoselect jquery.sumoselect.js - A beautiful cross device Single/Multi Select jQuery Select plugin. A jQuery plugin that progressively enhance

537 Dec 7, 2022

A fast, vanilla JS customisable select box/text input plugin for modern browsers ⚡

choices A fast, vanilla, lightweight (~16kb gzipped ?? ), configurable select plugin for modern browsers. Similar to Select2 and Selectize but without

9 Aug 9, 2022

Select plugin alternative to Select2 Vanilla JS

NPM package link https://www.npmjs.com/package/selectra Selectra Vanilla JS Select2 replacement, no jQuery components just pure JS. A custom select in

4 Apr 5, 2022

Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

12 Dec 12, 2022

A vanilla JavaScript multi-checkbox dropdown web component.

Multi-Checkbox Web Component Multi-Checkbox is a web component that utilizes multiple checkboxes in a dropdown list to populate the value of an input.

2 Dec 24, 2021

Superlight vanilla javascript plugin, for modern web dropdowns. Supporting multi-options, search and images. Designed to be seamlessly themed

Superlight vanilla javascript dropdowns by LCweb Need to jump off of jQuery (or any other) dependency? Other packages are too heavy to just tweak sele

10 Dec 26, 2022

Multi-level contextmenu created in Vanilla Javascript (no css files included)

ContexMenu.js Multi-level ContextMenu Created in Vanilla Javascript (No CSS Files) Import with jsDelivr <script src="https://cdn.jsdelivr.net/gh/L1qui

5 Nov 22, 2022