How to deselect all selected values from bootstrap-multiselect with reset button?

Question

I am having issues when trying to select the element which contains all the selected values.

For example: if you select by id such as 

$('#campaign-select').multiselect('refresh'),

it is not doing anything. Why is that?

Please see jsFiddle

FIXED IT!

$('#filter-reset-btn').on('click', function () {

               $('#campaigns-select').multiselect('rebuild');
               /* resetting the select element to refresh*/
               $('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select option:selected').each(function () {

                   $(this).prop('selected', false);

               })

               $('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select').val([]).multiselect('refresh')



           });

Here is updated to jsFiddle

Answer 1

You need to set the value to an empty array before refreshing the multi select. Also, note that you are missing an "s" in "campaign" inside you selector.

Use this: $('#campaigns-select').val([]).multiselect('refresh')

Answer 2

According to the documentation you can use:

.multiselect('deselectAll', justVisible): Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected.

After calling the previous method you need to updateButtonText:

.multiselect('updateButtonText'): When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.

Hence you can write:

 $('#campaigns-select').multiselect('deselectAll', false);
 $('#campaigns-select').multiselect('updateButtonText');

var msOptions = {
    includeSelectAllOption: true,
    enableFiltering: true,
    selectAllJustVisible: false,
    buttonWidth: '80%',
    buttonText: function (options, select) {
        return options.length + ' selected';
    }
};

$('#campaigns-select').multiselect(msOptions);
$('#sites-select').multiselect(msOptions);
$('#mdmadservers-select').multiselect(msOptions);
$('#ratetypes-select').multiselect(msOptions);


$('#filter-reset-btn').on('click', function () {
    $('#campaigns-select').multiselect('deselectAll', false);
    $('#campaigns-select').multiselect('updateButtonText');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<div id="wrapper">
    <!--SideBar-->
    <div id="sidebar-wrapper">
        <div class="sidebar-header" style="text-align:center;">Filters</div>
        <div id="sidebar-filter panel panel-default">
            <div class="form-group">
                <div class="text-caption" style="margin-top:20px;">Date Range</div>
                <div style="width: 80%;margin-left: 30px">
                    <input type='text' name="daterange" class="form-control" value=""/>
                </div>
            </div>
            <div class="form-group">
                <div class="text-caption">Campaign</div>
                <select class="form-control campaigns-select-class" id="campaigns-select" multiple="multiple">
                    <option value="2929">TestCampaign1</option>
                    <option value="2930">TestCampaign2</option>
                    <option value="2931">TestCampaign3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">Site</div>
                <select class="form-control sites-select" id="sites-select" multiple>
                    <option value="1010">TestSite1</option>
                    <option value="1011">TestSite2</option>
                    <option value="1012">TestSite3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">Server</div>
                <select class="form-control mdmadservers-select" id="mdmadservers-select" multiple>
                    <option value="1"> TestServer1</option>
                    <option value="2"> TestServer2</option>
                    <option value="3"> TestServer3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">Rate Type</div>
                <select class="form-control ratetypes-select" id="ratetypes-select" multiple>
                    <option value="Test1">Test1</option>
                    <option value="Test2">Test2</option>
                    <option value="Test3">Test3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">
                    <input type="checkbox" class="hide-completed-entries" id="hide-completed-entries" checked="checked">
                    Hide Completed
                </div>
            </div>
            <button type="button" class="btn btn-success btn-block" id="filter-btn">Apply</button>
            <button type="button" class="btn btn-primary btn-block resetfilters" id="filter-reset-btn">Reset</button>
        </div>

    </div>
</div>

Answer 3

try it!

$('#campaign-select').multiselect({
     buttonWidth: 330,
     includeSelectAllOption: true,
     allSelectedText: 'Clean all',
     onSelectAll: function (options) {
        $("#campaign-select").multiselect("clearSelection");
     }
});

Or adding Reset button

$('#campaigns-select').multiselect({
   buttonWidth: 330,
   enableResetButton: true,
   resetText: "Clean"
});

Print 01 Print 02