bootstrap multiselect(refresh) is not working prop

Question

I am using bootstrap multiselect list box. When user selects options on the multiselect it shows correctly. But there is a option to reset the previously selected options. When user click on reset button, automatically style=display:none is adding to the dropdown button and the dropdown list is becomes invisible.

This is my code

$("#button").click(function () {

    $('option', $('.multiselect')).each(function (element) {
        $(this).removeAttr('selected').prop('selected', false);

    });
    $('.multiselect').multiselect('refresh');
});

Answer 1

Bootstrap Multiselect fails if you just target the class like this.

$(".multiselect").multiselect("refresh");

This happens because there is something else in the plugin that has the class "multiselect". You have to let it know, that it is only the select's you want to target.

The following worked for me.

$("select.multiselect").multiselect("refresh");

The same counts for the "deselect" method.

$("select.multiselect").multiselect("deselectAll", false);

Answer 2

Look at this documentation: http://davidstutz.github.io/bootstrap-multiselect/

To deselect an option use this

$('.multiselect').multiselect('deselect', value)

Then call the refresh method

$('.multiselect').multiselect('refresh');

Answer 3

Other helpful options are:

1. $('Id').multiselect('refresh'); - Refreshs the multiselect based on the selected options of the select.

2. $('Id').multiselect('destroy'); - Unbinds the whole plugin.

3. buildFilter :Builds the filter.

4. buildSelectAll : Build the selct all.Checks if a select all has already been created.

5. $('Id').multiselect('select', ['1', '2', '4']); - Select all options of the given values.

6. clearSelection : Clears all selected items.

7. $('Id').multiselect('deselect', ['1', '2', '4']); - Deselects all options of the given values.

8. $('Id').multiselect('selectAll', true); - Selects all enabled & visible options.

9. $('Id').multiselect('deselectAll', true); - Deselects all options.

10. $('Id').multiselect('rebuild'); - Rebuild the plugin.

11. $('Id').multiselect('enable'); - Enable the multiselect.

12. $('Id').multiselect('disable'); - Disable the multiselect.

13. hasSelectAll : Checks whether a select all checkbox is present.

14. updateSelectAll : Updates the select all checkbox based on the currently displayed and selected checkboxes.

15. $('Id').multiselect('updateButtonText'); - Update the button text and its title based on the currently selected options.

16. getSelected() : Get all selected options.

17. getOptionByValue() : Gets a select option by its value.

18. $('Id').multiselect('dataprovider', options); - The provided data will be used to build the dropdown.

for more detail visit bootstrap-multiselect

Answer 4

My approach is to destroy the multiselect and then reinitialize it. That worked for me. Give it a try:

    function initMultiSelect(){

      $('#yourMultiselectId').multiselect({
        includeSelectAllOption: true,
        selectAllValue: 'select-all-value'
      });
    }


    $('#button').click(function(e){
        e.preventDefault();
        $('#yourMultiselectId').multiselect('destroy');
        initMultiSelect();
    });