Add blank option to top of select and make it the selected option in IE

Question

HTML:

<select id="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

jQuery:

$("#dropdown").prepend("<option value='' selected='selected'></option>");

When I run this in FireFox or Chrome, the drop down has the newly inserted blank option selected. When I run it in IE8, it still has Volvo selected. Any ideas?

http://jsfiddle.net/YFu2h/

Answer 1

Change it to this, and it'll work:

$("#theSelectId").prepend("<option value=''></option>").val('');

http://jsfiddle.net/YFu2h/1/

It seems that IE only evaluates the selected attribute when it first encounters the select.

Answer 2

I'm not sure why your code is not working (maybe it has something to do with the fact that in IE, selectedIndex is readonly) but, doing this works in IE:

$("#dropdown").prepend("<option value='' selected='selected'></option>");
$("#dropdown")[0].options[0].selected = true;

Answer 3

Try:

$("#dropdown").prepend(new Option('', '', true, true));
$("#dropdown option:first").attr("selected", "selected");

Or, if you prefer:

$("#dropdown").prepend("<option value=''></option>");
$("#dropdown option:first").attr("selected", "selected");

Using the first option is marginally quicker. The blank quotes mean blank value and blank text, so fill them in as you need. You don't need the selected attribute in the prepend now we are adding them afterwards. It's something to do with internet explorer not recognizing it being marked as selected as it has only just been created.

Answer 4

$("#id").prepend("<option value=' ' selected='selected'></option>");

prepend will add the option to top and selected='selected' will make it selected. As value=' ', so, it is blank value option.