Site Navigation

Tuesday, August 7, 2007

bug 274 - DOM Methods on Select Lists don't work in IE

Issue: #274
Affects: IE6, IE7, IE8, IE9 PP4, IE9 RC 1
Trackers:
MSKB Tracker: 276228

MSIE Feedback ID: 336252
Status: Microsoft has confirmed this will NOT be fixed in IE8 RTM

There is actually several issues with select list elements in Internet Explorer. See the Related Issues section for other issues.

This issue, is the fact that setting the .innerHTML on a select element does not work, and actually appears to render NO options in the list. Some will argue that the .innerHTML property isn't a DOM Method (true), but it has been adopted as a standard method to quickly populate the DOM Fragment inside of an element.

Example:

<script type="text/javascript">
var myOpts = '';
for(var i=1;i<32;i++){
myOpts += '<option value="' + i + '">April ' + i + '</option>';
}
var myDaysSelect = document.getElementById('daySelect');
myDaysSelect.innerHTML = myOpts;
</script>


Select Day:

(the select should populate with options for the days in April - including the bonus April 31st! - In IE any original options are wiped out and none of the new ones are added)


Known Workarounds: One. Apparently you can add the actual select element content to your string (pre and post) then set the .outerHTML value. NOTE: This will trash any event handlers you have on the original element.

Example Workaround Code:

Not going to post. Most advise against this workaround.



Related Issues: (bug 116).