Do I have to iterate through ALL the and set remove the 'selected' attribute or is there a better way?
Do I have to iterate through ALL the and set remove the 'selected' attribute or is there a better way?
Simply find all the selected <option> tags within your <select> and remove the selected attribute:
$("#my_select option:selected").removeAttr("selected");
As of jQuery 1.6, you should use .prop instead of removing the attribute:
$("#my_select option:selected").prop("selected", false);
$("#ddlMultiselect").val('').trigger("change");
for multi-select drop-down, it will clear displayed text.
You can pass an empty array to unselect all the selection. Here goes an example. From documentation
val()allows you to pass an array of element values. This is useful when working on a jQuery object containing elements like , , and s inside of a . In this case, the inputs and the options having a value that matches one of the elements of the array will be checked or selected while those having a value that doesn't match one of the elements of the array will be unchecked or unselected, depending on the type.
$('.clearAll').on('click', function() {
$('.dropdown').val([]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button class='clearAll'>Clear All Selection</button>
$('.clearAll').on('click', function() {
$('.dropdown').val([]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button class='clearAll'>Clear All Selection</button>
$('.selectpicker').selectpicker('deselectAll');
https://developer.snapappointments.com/bootstrap-select/methods/
I've tried many solutions and came up with this.
Options and selections of the dropdown are cleared using this only
$("#my-multi option:selected").prop("selected", false);
$("#my-multi option").remove();
But the interface is not updated. So you have to do this
$('#my-multi').multiselect('rebuild');
Hence, the final code is
$("#my-multi option:selected").prop("selected", false);
$("#my-multi option").remove();
$('#my-multi').multiselect('rebuild');
Suggestions and improvements are welcome.