Multiselect Dropdown List With Checkboxes – multiselect.js

Category: Form , Javascript | October 7, 2018
Author: mneofit
Views Total: 7,994
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:


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

  1. Lakshmi

    How to deselect all the check boxes grammatically? How to get the list of selected check boxes?

    Reply
  2. Ashraf Khunduqji

    the deselect all is not working…
    make multiselect box displayed -> check select all-> then uncheck select all -> you will see that elements still selected
    if you uncheck options one by one then you will find that options will be unselected normally

    Reply
  3. Ashraf Khunduqji

    Please fix the bug for function _performSelectAll by adding
    self._item.options[e.index].selected = false;
    Otherwise when you uncheck Select All, it will perform the uncheck but inside the real select box items will remain selected which will return inaccurate results

    Reply
  4. luca

    with php I get the whole array back and not only selected items

    Reply

Leave a Reply