bootstrap multiselect(refresh) is not working properly

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');
});

Somnambulation

Answer 1

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

Smog

You saved my time – Circassian

This one work for me: $('Id').multiselect('rebuild'); - Rebuild the plugin. – Drupelet

Answer 2

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);

Dianadiandra

Answer 3

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();
    });

Hylomorphism

Answer 4

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');

Sandblind

I am successfully unselecting the options which are previously selected but my question is when i call $('.multiselect').multiselect('refresh'); the option list becomes hide because style=display:none is adding to the dropdown button and the dropdown list is becomes invisible. – Somnambulation

If I use 'refresh'a new element of multiselect is created. Why? – Sallust

Answer 5

$('option', "#id").each(function(element) {
  jQuery("#id").multiselect('deselect', $(this).val());
});

I am successfully unselecting the options which are previously selected.

Fabre

Answer 6

$("#selectedVariables option:selected").prop("selected",false);
$("#selectedVariables option").remove();
$('#selectedVariables').multiselect('rebuild');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

Crenation

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Boatright