Comments on: Bug when creating select options using innerHTML in IE

By: Mrinal

Mrinal — Mon, 24 Mar 2008 14:54:43 +0000

I finally found the solution for ‘bug in select option in IE’ specially for the values return by Ajax
the following function will work
function setText(xmlHttp.responseText)
{
var resText=xmlHttp.responseText;
document.getElementbyId(“select_element”).innerHTML=”"+resText;
document.getElementbyId(“select_element”).outerHTML=document.getElementbyId(“select_element”).outerHTML;
}

Here xmlHttp.responseText is the response from ajax funtion which is not shown here.

By: Stuart Colville

Stuart Colville — Sat, 02 Feb 2008 20:29:30 +0000

@James: I think your last comment (removed) got eaten by something. Feel free to drop me a line and I’ll update your comment.

By: James

James — Fri, 01 Feb 2008 19:29:03 +0000

I’ve worked around the problem using the following:
var sourceList = document.getElementByID(“mySelectBox”);
var newInnerHTML = sourceList.parentNode.innerHTML;
var bracketPos = newInnerHTML.indexOf(“>”)+1;
newInnerHTML = newInnerHTML.substring(0, bracketPos)+ SourceOptionsList+ “”;
sourceList.parentNode.innerHTML = newInnerHTML;

I find everything before the first ‘>’, keep that part, and then replace everything after it with my new list of options, and the .

This, of course, will clobber the sourceList variable, as you’re replacing your referenced select object with something completely new.

By: Ralph

Ralph — Tue, 15 Jan 2008 18:41:01 +0000

As noted by most, there isn’t one nice clean solution other than using the Option() constructor.

The bug is tracked here:
http://webbugtrack.blogspot.com/2007/08/bug-274-dom-methods-on-select-lists.html

But the “best” workaround is not mentioned.

By: George

George — Tue, 06 Nov 2007 19:01:45 +0000

There is a big problem with selectBox.outerHTML = selectBox.outerHTML;

Any DOM-added event handlers associated with the control (via $addHandler()) will be wiped out.

Yes, this sucks.

By: LongStone

LongStone — Fri, 05 Oct 2007 21:37:53 +0000

I finally tried the “paste over” for outerHTML worked in this instance…this is after trying normal DOM methods (IE won’t render at all), used it before (create all my elements with DOM compliant code then extract all the HTML for an IE cludge)

tried:
document.createElement(HTMLString); then append -> parent.appendChild(newChild);
then adding inputOption = new Option(vars)
(IE sets first element as selected, can’t change it via element.selected or element.defaultSelected )

not sure if this is consistant (like anything is in IE except errors)

If you want IE to render the HTML properly for display purposes use innerHTML

If you want IE to be able to access the new element in the DOM (like $() or getElementByID) use
document.createElement(HTMLString); then append -> parent.appendChild(newChild); BTW, you’ll have to do this for all your sub elements too :-/

remember with the above method IE will only accept the outer element, ie if HTMLString =

ONLY the select will be out put

Dan, re. “The IE team is not lazy…they are just incompetent” They should be gang raped by a pack of rabid baboons. Time for a class action lawsuit and bill back to M$ for all the wasted time doing work arounds lol.

By: zig

zig — Fri, 04 May 2007 12:02:40 +0000

I have used the outerHTML-trick and i am having problems with the options[n].selected-property. It seem to be unassigned.

It doesn’t seem as if that property is properly refreshed.

By: Alan

Alan — Fri, 26 Jan 2007 18:45:59 +0000

The quick workaround posted above will work with just a little bit more of a hack.
if(document.all) { opts = '' + opts; } objTargetSelect.innerHTML = opts; if(document.all) { // Or any IE testing objTargetSelect.outerHTML = objTargetSelect.outerHTML; }
Pretty cheesy to have to do something like this, but it works

By: dan

dan — Tue, 14 Nov 2006 11:52:50 +0000

A 7 yr old bug. The IE team is not lazy, as claimed by some ignorant people – they are just incompetent. Microsoft should stop browser development and instead focus on securing their not-surprisingly buggy OS.

By: Bram

Bram — Wed, 08 Nov 2006 14:59:19 +0000

@GavrocheLeGnou:
This wont work… The first OPTION-element gets truncated (as said in the original article) so although it seems it works (no errors, filled options) you’re missing your first OPTION.