Deselecting all elements from a multi-select dropdown in jQuery

Question

I have a multi-select drop down as following, where I have selected the options "Test 2" and "Test 3".

<select id="edit-rec" class="form-select" multiple="multiple" name="rec[]">
<option value="6012">Test 1</option>
<option value="8436">Test 2</option>
<option value="4689">Test 3</option>
<option value="6784">Test 4</option>
</select>

I have a button called "Deselect All". When this button is clicked, all selected items should be deselected. In this case, the items I previously selected, "Test 2" and "Test 3", should now become deselected.

How can I accomplish this using jQuery?

Agape

Answer 1

$("#edit-rec option:selected").removeAttr("selected");

Swung

Better to use $("#edit-rec option:selected").prop("selected", false); – Purposeful

Answer 2

Try -

$("#edit-rec > option").attr("selected",false);

Demo - http://jsfiddle.net/LhSBu/

Lancastrian

Your code looks very good. But could you explain the syntax $("#edit-rec > option") – Agape

$("#edit-rec > option") should select any option elements that are direct child elements the #edit-rec element. See - api.jquery.com/child-selector – Lancastrian

I would suggest removing the > part. It doesn't make sense in this case, and would cause unexpected behavior using <optgroup> as a parent of <option>. – Evans

You need to use prop instead of attr these days, but yeah. – Billiton

Answer 3

The easiest way that I found to unselect all options in a multi-select dropdown was using .val([]).

$("#select").val([]);

Punchboard

in my case $("select").val([]); worked perfectly, thanks! – Rew

Answer 4

On click of radio button you can use this

$("#edit-rec  option").each(function(){

    this.selected=false;

});

Alkahest

Answer 5

It will remove all checked options from multiselect dropdownlist :

$('#ddlTradeShow').multiselect("clearSelection");

Holeandcorner

Please add a bit of explanation to your answer, to make it more readable – Orvilleorwell

didn't go through the documentation yet, but it worked :) – Snowplow

Answer 6

$("#edit-rec option:selected").removeAttr("selected");

Snoopy

Answer 7

Can do something like this JS Fiddle for setting up the click on the radio button http://jsfiddle.net/x5ck3/

$('#rdClear').click(

function() {
    $("#edit-rec option:selected").removeAttr("selected");
});

Artiste

Answer 8

$("#butt").click(function () {
    $("#edit-rec > option").removeProp("selected");
});

that's correct with new jQuery version

Lectern

very bad idea, from api.jquery.com/removeProp This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead. – Dowson

Answer 9

There is now another possibility directly provided by the API :

$('#edit-rec').multiSelect('deselect_all');

Works fine, here you can find more options about it : http://loudev.com/

Decameter

Answer 10

You can use the vanilla HTMLSelectElement DOM interface, and also there's no need to iterate over all of the <option> elements. Either selectedIndex or value can be used:

$('#edit-rec')[0].selectedIndex = -1;

Or:

$('#edit-rec')[0].value = '';

Those will both work regardless of the multiple attribute. See this fiddle for examples of various methods.

---

PS: For multiple elements you can use jQuery's .each (but be careful to return non-false from the callback), or the DOM collection's .forEach (return values don't matter):

$('.all-the-selects').each((_,s) => s.selectedIndex = -1);

Or:

$('.all-the-selects').get().forEach(s => s.selectedIndex = -1);

Billiton