Create multiple select dropdowns using- multiselect.js

Category: Form JavaScript/jQuery Plugins Recommended | July 3, 2021
0 Comment
Demo Download
Author: varundewan
Official Page: Go to website
Last Update: July 3, 2021
License: MIT
Create multiple select dropdowns using- multiselect.js

Description:

Are you creating a project in which, multiple select dropdowns are needed? Then, you are in the correct place. In this article, I am going to share a very simple and light-weighted plugin called multiselect.js and how to integrate this plugin into your project.

A little about the plugin:

multiselect.js is a custom multi-select dropdown plugin created using vanilla JavaScript. This plugin converts, normal dropdown element into user-friendly tags input. Users can select any number of items from the list and can deselect items by clicking on the ‘x’ button.

How to use multiselect.js in project?

First include style.css file into your page’s <head> tag.

<link rel="stylesheet" href="css/style.css">

Then, include index.js file in the footer.

<script src="js/index.js"></script>

Now, create a select element like this.

<select multiple="multiple" id="myMulti">
    <option>Item 1</option>
    <option>item 2</option>
	<option>item 3</option>
    <option>item 4</option>
</select>
var myDrop = new drop({
    selector:  '#myMulti'
});

You can add items in array that will be displayed as preselected:

var myDrop = new drop({
    selector:  '#myMulti'
    preselected: [0, 1]
});

Related posts:

Create beautiful multiple slides Bootstrap 5 Carousel with CSS and JavaScript vue-next-select drop-downCreate Multi-select Drop-down With VueJS 3 – vue-next-select vuejs feature rich multi selectFeature rich select component for Vue.js – vue-select Create a user friendly input mask and validation using JavaScript smask plugin SelectAllCheckbox Plugin: Check & Uncheck All Checkboxes On Single Click Create a simple and elegant 5-star rating system with HTML radio buttons and CSS