In IE8 .append does not append option elements correctly

Reported by:	tentonaxe	Owned by:	rwaldron
Priority:	high	Milestone:	1.8
Component:	manipulation	Version:	1.7.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

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/

Attachments (0)

Change History (4)

Changed March 20, 2012 05:52PM UTC by rwaldron comment:1

component:	unfiled → manipulation
priority:	undecided → low

Creating with a string of markup works correctly:

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

Changed March 20, 2012 05:55PM UTC by rwaldron comment:2

milestone:	None → 1.8
owner:	→ rwaldron
priority:	low → high
status:	new → assigned

Confirmed

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

Changed March 20, 2012 05:56PM UTC by rwaldron comment:3

More references

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

Changed May 12, 2012 06:44PM UTC by dmethvin comment:4

resolution:	→ wontfix
status:	assigned → closed

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.

Side navigation