Multiselect Dropdown List With Checkboxes – multiselect.js

Category: Form , Javascript | April 13, 2020
Author:mneofit
Views Total:166,886 views
Official Page:Go to website
Last Update:April 13, 2020
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:

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

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

2. 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>

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

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

4. Activate the plugin and done.

document.multiselect('#testSelect1');

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

.multiselect-wrapper {
  ...
}
...

5. API methods.

// get value
document.multiselect('#testSelect1').value;
// select all
document.multiselect('#testSelect1').selectAll();
// deselect all
document.multiselect('#testSelect1').deselectAll();
// set value
document.multiselect('#testSelect1').select(value);
// make a value enabled
document.multiselect('#testSelect1').setIsEnabled(value);
// set the click listener for checkbox with particular value
document.multiselect('#testSelect1').setCheckBoxClick(value, handler);
// destroy
document.multiselect('#testSelect1').destroy();

Changelog:

04/13/2020

  • Added setIsEnabled

04/09/2020

  • Fixed initial select

04/05/2020

  • Fixed deselect issue
  • Fixed: Does not refresh when original select box gets new attributes
  • Easier way to set width

10/07/2018

  • bugfix

You Might Be Interested In:


25 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. Alexandre DUPUIS

    Thanks Ashraf, I have applied your code and it works now.

    See b._item.options[d.index].selected = false in line below :

    _performSelectAll:function(a,b){var c=b._getItems();a.checked?(b._itemCounter=c.length,m_helper.each(c,function(d){m_helper.setActive(d.multiselectElement.parentElement.parentElement),m_helper.select(b._item.options[d.index]),m_helper.check(d.multiselectElement)})):(b._itemCounter=0,m_helper.each(c,function(d){d.multiselectElement.parentElement.parentElement.classList.remove(‘active’),b._item.options[d.index].removeAttribute(‘selected’),b._item.options[d.index].selected = false,m_helper.uncheck(d.multiselectElement)}))}

    Reply
    1. Amol

      Hi Alexandre/Ashraf,

      I have updated the code as you mentioned above; still when I unselect all; and select only a few from the drop down and click submit it selects all and returns me the result. But from the second time it works fine. am I missing anything? Can you please help?

      Regards
      Amol

      Reply
      1. Amol

        Also; by default; how can I have an un-selected list of items in the drop down?

        Reply
  5. Frank Paprosky

    Thanks for this tool, but there’s a bug in the _performSelectAll function,

    Check the comment line :

    }
    else {
    self._itemCounter = 0;
    m_helper.each(items, function(e) {
    e.multiselectElement.parentElement.parentElement.classList.remove(‘active’);
    self._item.options[e.index].removeAttribute(‘selected’);
    // Here we need to put the option seleted to false otherwise this option item will be posted.
    self._item.options[e.index].selected = false;
    m_helper.uncheck(e.multiselectElement);
    });
    }

    Reply
  6. mike

    Is there an easy way to disable the Select All functionality?

    Reply
  7. Mike

    Is there a simple way to disable the Select All functionality?

    Reply
    1. RKS

      Use something like this in jquery:
      $(‘#your_itemList’).find(‘span:first’).empty();

      Reply
  8. Himanshu Mittal

    if I am using it in angularjs where I am setting select option value like in ng-repeat its not showing. and If I set $(“#”+dyamic_id).multiselect(); then also its not working

    Reply
  9. Shabz

    Hi,

    This works well, but can anyone let me know how can I close the dropdown for each option selection as like normal select box? I want the drop down to be closed when clicking on arrow after the selection has been done. Please anyone.

    Reply
  10. Dmitry

    Hello! How can I add event listener not only for particular val, but for any checked checkbox

    Reply
  11. Rita Carp

    Is there a way to change the color of the text of the selected or deseleted items in the options list?
    And also to change the background color of the check box, when its checked?
    I’m trying to get this to work with CSS that I am using, and the I’ve almost got it, except for the color of selected items, and the check box background color

    Reply

Leave a Reply