In IE8 .append does not append option elements correctly

[tentonaxe]

When appending options to a select in IE8 with new Option, the option gets appended to the select without a label.

var sel = $("select");
for (var i = 1; i <= 50; i++) {
    sel.append(new Option(i,i));
}

​http://jsfiddle.net/7qfhg/

Here's a workaround to the problem:

var sel = $("select");
for (var i = 1; i <= 50; i++) {
    var temp = new Option(i,i);
    sel[0].options[sel[0].options.length] = temp;
}

​http://jsfiddle.net/7qfhg/4/

Related SO question: ​http://stackoverflow.com/questions/9778469/jquery-1-7-working-differently-in-ie8-and-ie9/9778512#comment12465790_9778512

[Rick Waldron]

Creating with a string of markup works correctly:

​http://jsfiddle.net/rwaldron/7qfhg/5/show/light

[Rick Waldron]

Confirmed

​http://jsfiddle.net/rwaldron/VsxSp/2/show/light

[Rick Waldron]

More references

​http://msdn.microsoft.com/en-us/library/ms535921(v=vs.85).aspx

[dmethvin]

This seems sufficiently obscure that we should just call it a wontfix. If it was a serious problem we'd have heard about it earlier. Heck, most web developers today don't know about new Option I bet.

Here is a screen shot from the IE8 debugger showing the result of new Option("arf", "dog") without inserting it into the document. You can see it has inconsistent state. Note in particular that the outerHTML value is missing its text/label. ​http://i.imgur.com/ZSoQD.png

Yes it could be fixed but no it isn't worth the bytes since there are multiple simple workarounds.