Create multiple select dropdowns using- multiselect.js


Category: Form JavaScript Plugins Recommended | September 12, 2020
0 Comment
Demo Download
Author:varundewan
Official Page:Go to website
Last Update:June 16, 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]
});