41

Why doesn't this work in IE8 to deselect all options in a multiline selectbox?

$("#myselect").children().removeAttr("selected");

Is there a workaround? Nothing I could think of (attr("selected","") etc) seems to work.

UPDATE: Here is an updated jsFiddle. I have at least got it to degrade so that in IE8 the first option is selected. But without the hardcoded selected='selected' and the .attr call that IE8 seems to need, it does 3 different things in Firefox, Chrome and IE8! See this version:, which is simple and seems like it should work:

  • in Firefox: nothing selected
  • in Chrome: 0th option selected
  • in IE8: 1st option selected

Maybe I have made myself crazy and there is a mistake in there somewhere I can't see?

Kara
  • 6,115
  • 16
  • 50
  • 57
Don Zacharias
  • 1,544
  • 2
  • 14
  • 31
  • I'm having the same problem as Don. The "selecting the first item" workaround isn't appropriate for my use, however. Gabe's solution doesn't work. This is gabe's updated jsFiddle that doesn't work. http://jsfiddle.net/UFk5w/36/. The answer given in http://stackoverflow.com/questions/1857781/best-way-to-unselect-a-select-in-jquery doesn't work either. The bounty is worth an answer that works. – Clinton Pierce Mar 26 '12 at 16:25

7 Answers7

69

The question is asked in a misleading manner. "Removing the selected attribute" and "deselecting all options" are entirely different things.

To deselect all options in a documented, cross-browser manner use either

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

or

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);
Jon
  • 428,835
  • 81
  • 738
  • 806
  • Interestingly #2 above does not seem to work here: https://stackoverflow.com/questions/58297515/cant-select-option-again-after-unselect/ – mplungjan Oct 09 '19 at 07:37
  • 1
    @mplungjan I'm not sure exactly what does not work at the link you provided, but the code in that question uses `attr` instead of `prop` which is, as explained, wrong. – Jon Oct 11 '19 at 11:10
22

This works:

$("#myselect").find('option').removeAttr("selected");

or

$("#myselect").find('option:selected').removeAttr("selected");

jsFiddle

Gabe
  • 49,577
  • 28
  • 142
  • 181
  • I prefer: `$("#myselect").find('option:selected').removeAttr("selected");`. Not that there is a world difference thou ;) – roselan Oct 31 '11 at 23:07
  • There is a difference. The first tries to remove the `selected` attribute from all `option` elements. The second filters down all the option elements that actually have a `selected` attribute, then removes it from just those. – Alex Sexton Oct 31 '11 at 23:12
  • Thanks! But it doesn't work for me. I updated the fiddle to add some other things from my real example. http://jsfiddle.net/UFk5w/4/ Works great in Chrome+FF, but in IE8, the option with value=1 is selected. – Don Zacharias Nov 01 '11 at 05:10
21

It's something in the way jQuery translates to IE8, not necessarily the browser itself.

I was able to work around by going old school and breaking out of jQuery for one line:

document.getElementById('myselect').selectedIndex = -1;
CJ Ramki
  • 2,620
  • 3
  • 25
  • 47
radiak
  • 242
  • 2
  • 3
  • I like it! Thanks. I had to deploy my hacky thing but I think I'll go back and refactor. – Don Zacharias Apr 25 '12 at 19:32
  • Using `selectedIndex` turned out to be the best approach for me, but I used `prop`, like this: `obj.prop('selectedIndex', -1);`. Since I am also using bootstrap-select, to make this work I had to do a refresh too, after setting the property - `obj.selectpicker("refresh")`. – Pablo Sep 12 '17 at 12:55
10

Using jQuery 1.9 and above:

$("#mySelect :selected").prop('selected', false);
Santosh
  • 2,430
  • 5
  • 33
  • 47
2

Similar to @radiak's response, but with jQuery (see this API document and comment on how to change the selectedIndex).

$('#mySelectParent').find("select").prop("selectedIndex",-1);

The benefits to this approach are:

  • You can stay within jQuery
  • You can limit the scope using jQuery selectors (#mySelectParent in the example)
  • More explicitly defined code
  • Works in IE8, Chrome, FF
JJ Zabkar
  • 3,792
  • 7
  • 45
  • 65
1

Another alternative:

$('option:selected', $('#mySelectParent')).removeAttr("selected");

Hope it helps

Eolia
  • 227
  • 2
  • 4
  • 1
    This helped me, but with a slight difference :) `$("#myselect option:selected").removeAttr("selected");` – miguelmpn Aug 04 '15 at 15:51
1

Well, I spent a lot of time on this issue. To get an answer working with Chrome AND IE, I had to change my approach. The idea is to avoid removing the selected option (because cannot remove it properly with IE). => this implies to select option not by adding or setting the selected attribute on the option, but to choose an option at the "select" level using the selectedIndex prop.

Before :

$('#myselect option:contains("value")').attr('selected','selected');
$('#myselect option:contains("value")').removeAttr('selected'); => KO with IE

After :

$('#myselect').prop('selectedIndex', $('#myselect option:contains("value")').index());
$('#myselect').prop('selectedIndex','-1'); => OK with all browsers

Hope it will help

Pierre
  • 31
  • 3