jquery attr(' selected','selected') for option not working in IE

Question

When i change the option in select dropdown,I pass the value selected to that particular option..it works fine in chrome and FF.But it is not working in IE.

I do it by passing $('select option').removeAttr('selected'); $(this).attr("selected", "selected"); $('select option').removeAttr('selected'); $(this).attr("selected", "selected");

I am passing example in jsfiddle http://jsfiddle.net/harshacharya/JyvUm/

I am trying to do something like this: When an option is selected,it has attribute selected and other option dont. The above function dont work in IE.

Can you please help me.Thanks.

Answer 1

It appears you want to see your change in the DOM inspector. IE will not do that by default (and you should not care as the selected values behind-the-scenes are correct).

However, in IE, you can do this by setting the prop defaultSelected to "selected" . You will then see the visual attribute change in the DOM.

.prop("defaultSelected", "selected");

Note: To remove it from the other elements you need to set the prop to null.

$(this).find('option').prop("defaultSelected", null);

JSFiddle: http://jsfiddle.net/TrueBlueAussie/JyvUm/8/