Select option not dynamically set on IE9

Question

I have looked at all the answers related to this, but still cannot figure out. Please help. I have a jquery code as below :

$('#DDPrimaryServiceLine').find('option:contains("' + rowData['Primary_Service_Line'] + '")').attr("selected", true);

rowData is generated from ajax through DB call. Also originally the select is empty ,it is getting dynamically populated at run time. By Default it has null as selected.

On running, the drop down displays default selected null in IE9, though it works perfectly well in Google Chrome.

Please suggest. (I tried writing

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

too in my code. But doesn't work )

You should be setting the `val()` of the `select` and not selecting the `option`. Also use `prop()` and not `attr()` to change properties like `selected`. — iCollect.it Ltd, Feb 02 '15 at 10:32
Wow ! I was trying with val too like $('#DDPrimaryServiceLine').find("option[value='" + rowData['Primary_Service_Line'] + "']").attr("selected", true); but it wasnt working. Changing attr() to prop() works sexy :D — user3814961, Feb 02 '15 at 10:47

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

Does the solution here help Best way to unselect a <select> in jQuery?

using .prop("selected", false) instead of .removeAttr() ?

edited May 23 '17 at 10:27

Community

1
1

answered Feb 02 '15 at 10:33

TonyS

556
8
11

Sorry my question was of setting a value nor removing it. – user3814961 Feb 02 '15 at 10:47
The last part of your question says "Please suggest. (I tried writing $("#DDPrimaryServiceLine option:selected").removeAttr('selected'); too in my code. But doesn't work )" – TonyS Feb 02 '15 at 10:50
Yes because at some sites they mentioned remove the previous selected values before setting the one. So that was what I had tried. – user3814961 Feb 02 '15 at 11:10

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

I need to see also your html code to see where the error can be. Check this link: ie9 select default value

edited May 23 '17 at 11:44

Community

1
1

answered Feb 02 '15 at 10:44

DonutMan

36
1

This should be a comment. – iCollect.it Ltd Feb 02 '15 at 10:46
if I could make comments to others, I don't have enough reputation yet ;) – DonutMan Feb 02 '15 at 12:03

score 0 · Accepted Answer · answered Feb 02 '15 at 10:48

Comment as answer:

You should be setting the val() of the select and not selecting the option, however if you want to change the selected property of an option, use prop() and not attr(). This sets the correct internal values (and triggers selection changes) and does not just change the display attributes.

e.g.

$('#DDPrimaryServiceLine').find('option:contains("' + rowData['Primary_Service_Line'] + '")').prop("selected", true);

prop has the added advantage that the values returned are not just strings and it will correctly return true and false boolean values if the attribute is "true" or "false".

Select option not dynamically set on IE9

3 Answers3