[jquery] jquery remove "selected" attribute of option?

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?

Another alternative:

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

Hope it helps

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

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

Using jQuery 1.9 and above:

$("#mySelect :selected").prop('selected', false);

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

This works:

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

or

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

jsFiddle