This is documented via Microsoft KB article 276228. Microsoft’s proposed fix, in abstract: “don’t do that”.
So I was trying my hand at some fancy AJAX to dynamically populate a select dropdown menu based on a previous select menu. An xmlhttprequest is triggered onChange of the first menu. We hit up an API, parse and transform the response into this HTML fragment consisting of <option> tags and values, and assign to the innerHTML property. Simple and quick. Works on Safari, Firefox…and of course, not on IE 6.
Some time wasted later, an alert() on the innerHTML property shows that in fact, the string there is malformed. The first <option> start tag is truncated from the innerHTML. No wonder it doesn’t work; it’s malformed. And it wasn’t, to start with, when my transformation finished and delivered the final string.
The apparent solution is to follow Microsoft’s advice on that page and do something else:
– assign to the options collection
– workaround using outerHTML
I’m sure there’s a way to jury rig it so that IE is fooled into concat’ing an “<option>” back onto the innerHTML, and disabling this workaround for other user agents. But that’s rather inelegant, no? I opted to use the options collection, which seems a reasonable (if slightly more complicated) method than just a simple assignment to innerHTML.
The KB article lists this as a problem with IE 5, but it recurs in IE 6. Does it persist in IE 7?
2 Replies to “Cannot populate a select element under IE 6 using the innerHTML property”
This is bug 247 on Web Bug Track.
And yes, it still occurs in IE7.
This is of course only one of the many IE .innerHTML bugs (Tables are IE’s biggest related innerHTML/DOM bug)
Still persists in IE8, is this a “feature” now?