How to set the default value of a select box using JQuery in IE9?

Question

I have the following select box.

<select id="selId">
     <option id='1' value='1'>1</option>
     <option id='2' value='2'>2</option>
     <option id='3' value='3'>3</option>
     <option id='4' value='4'>4</option>
     <option id='5' value='5'>5</option>
</select>

In jquery I am doing the following to select the value 2 in the select box.:

...
$("select#selId").find("option#2").attr("selected", "selected");
...

The same code sets the value of 2 in the select box in IE8 and Firefox. But its not working in IE9.

I am using JQuery 1.6.1 version

Answer 1

Instead of setting the selected attribute, just use .val("2").

See here: jsFiddle

Answer 2

Anyway, this worked well on IE9 if you want to mantain the "SELECTED" attribute

$("select#selId").find("option#2").attr("selected", true);

http://jsfiddle.net/cqENs/

Answer 3

You could use val() to set the option instead - see Change the selected value of a drop-down list with jQuery

Answer 4

change this one

$("select#selId").find("option#2").attr("selected", "selected");

into this one

$("select#selId").find("option#2").attr("selected", true);