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?

Tucci

Answer 1

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

Fulmar

for multi select drop down , this will not clear displayed text. – Nonperishable

But how do you clear displayed text? – Breadstuff

$("#my_select option:selected").prop("selected", false); clears displayed text for me? – Depressomotor

Answer 2

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' );

Lebaron

This answer is not relevant to the question. – Lauritz

What library is this for? Multiselect isn't part of jQuery or jQueryUI. – Esch

This is for bootstrap multiselect may be – Laval

worked for me : jQuery(".select-access").multiselect("clearSelection") "s" lowerCase. – Gimmick

he's refering to this plugin loudev.com/#usage and btw "clearSelection" don't work now. use "deselect_all" instead – Encarnacion

Answer 3

Shortest and quickest way to remove all the selection, is by passing empty string in jQuery .val() function :

$("#my_select").val('')

Quack

just a warning that if you have an option with value="", this method will select it so accepted answer is the way for you jsfiddle.net/yemgudc8 – Rijeka

Answer 4

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

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

Gleeful

Answer 5

In JQuery:

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

Krupp

Answer 6

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

Mezzosoprano

Please add some explanation to your answer :) – Gnarly

Answer 7

$("#ddlMultiselect").val('').trigger("change");

for multi-select drop-down, it will clear displayed text.

Endoskeleton

Answer 8

jQuery's :selected selector is probably what you are looking for.

Aegir

Answer 9

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

Marchak

The question is specifically asking for a way to do it without iterating over the whole list (which could get resource heavy if the list is long) – Obedience

Answer 10

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>

Beak

Answer 11

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

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

Lawless

This is the one that works if you're using bootstrap-select – Flieger

Answer 12

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.

Dimarco

$('#my-multi').multiselect('rebuild'); this worked for me thanks bro :) – Featly

Answer 13

$("#my_select option:selected").prop("selected", false).change();

Its clear value and display text as well.

Unending

Answer 14

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

Waac