Multiselect Dropdown List With Checkboxes – multiselect.js

Category: Form , Javascript | October 7, 2018
Author: mneofit
Views Total: 5,752
Official Page: Go to website
Last Update: October 7, 2018
License: MIT

Preview:

Multiselect Dropdown List With Checkboxes – multiselect.js

Description:

multiselect.js is an unobtrusive JavaScript plugin that converts the native select box into a multi-select control with checkboxes and check all button.

How to use it:

Include the stylesheet ‘multiselect.css’ in the head section of the webpage.

<link href="multiselect.css" rel="stylesheet">

Create a normal ‘multiple’ select element on the webpage.

<select id='testSelect1' multiple>
  <option value='1'>Item 1</option>
  <option value='2'>Item 2</option>
  <option value='3'>Item 3</option>
  <option value='4'>Item 4</option>
  <option value='5'>Item 5</option>
</select>

Include the JavaScript file ‘multiselect.min.js’ at the bottom of the webpage.

<script src="multiselect.min.js"></script>

Activate the plugin and done.

document.multiselect('#testSelect1');

Override the default styles in the ‘multiselect.css’ as per your needs.

.multiselect-wrapper {
  ...
}

...

Changelog:

10/07/2018

  • bugfix

You Might Be Interested In:

2 thoughts on “Multiselect Dropdown List With Checkboxes – multiselect.js

Leave a Reply