Do I have to iterate through ALL the and set remove the 'selected' attribute or is there a better way?
This question is related to
jquery
multi-select
ui-select2
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.
$('.selectpicker').selectpicker('deselectAll');
https://developer.snapappointments.com/bootstrap-select/methods/
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() {_x000D_
$('.dropdown').val([]);_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<select class="dropdown" multiple>_x000D_
<option value="volvo">Volvo</option>_x000D_
<option value="saab">Saab</option>_x000D_
<option value="opel">Opel</option>_x000D_
<option value="audi">Audi</option>_x000D_
</select>_x000D_
_x000D_
<button class='clearAll'>Clear All Selection</button>
_x000D_
In javascript,
You can use the list of all options of multiselect dropdown which will be an Array.Then loop through it to make Selected attributes as false in each Objects.
for(var i=0;i<list.length;i++)
{
if(list[i].Selected==true)
{
list[i].Selected=false;
}
}
Shortest and quickest way to remove all the selection, is by passing empty string in jQuery .val() function :
$("#my_select").val('')
In order to clear all selection, I am using like this and its working fine for me. here is the script:
$("#ddlMultiselect").multiselect("clearSelection");
$("#ddlMultiselect").multiselect( 'refresh' );
$('.clearAll').on('click', function() {_x000D_
$('.dropdown').val([]);_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<select class="dropdown" multiple>_x000D_
<option value="volvo">Volvo</option>_x000D_
<option value="saab">Saab</option>_x000D_
<option value="opel">Opel</option>_x000D_
<option value="audi">Audi</option>_x000D_
</select>_x000D_
_x000D_
<button class='clearAll'>Clear All Selection</button>
_x000D_
Assuming you are using Bootstrap multiselect dropdown by David Stutz
$('#selectId').multiselect('deselectAll', false);
But for some reason it does not work inside initialization method
This is the best way to clear a multi-select or list box:
$("#drp_assign_list option[value]").remove();
$("#ddlMultiselect").val('').trigger("change");
for multi-select drop-down, it will clear displayed text.
jQuery's :selected selector is probably what you are looking for.
In JQuery:
$("#id option:selected").prop("selected", false);
$("#id").multiselect('refresh');
Source: Stackoverflow.com