Bootstrap MultiSelect Reset Feature
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
...
JavaScript
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 () {
$('#campaign-select').multiselect('rebuild');
/* resetting the select element to refresh*/
$('#campaign-select option:selected').each(function () {
$(this).prop('selected', false);
alert("it is working!")
})
$('#campaign-select').multiselect('refresh');
});