Create multiple select dropdowns using- multiselect.js


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

Leave a Reply

Your email address will not be published. Required fields are marked *