Quick way to clear all selections on a multiselect enabled <select> with jQuery?

Question

Do I have to iterate through ALL the and set remove the \'selected\' attribute or is there a better way?

Answer 1

This is the best way to clear a multi-select or list box:

 $("#drp_assign_list option[value]").remove();

Answer 2

$('.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>

Answer 3

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

Answer 4

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.

Answer 5

In JQuery:

  $("#id option:selected").prop("selected", false);
  $("#id").multiselect('refresh');

Answer 6

$('.selectpicker').selectpicker('deselectAll');

https://developer.snapappointments.com/bootstrap-select/methods/