DomHelper builds bad HTML for Select options in IE

**tryanDLS** · 26 Jan 2007 12:45 PM

Using the following sample, the select list is correctly built in FF, but not in IE. The option tags are getting appended to the the dom as 'value</OPTION>'. The rest of the tag is being dropped. Stepping thru insertHtml(), the html is correctly passed and it's doing the correct el.insertAdjacentHTML('beforeed', html), but el.dom shows a misconstructed innerHTML value.

I've tried this a few different ways and it's always wrong. I thought maybe this was related to the prevous IE template bug that was patched, but it fails with the patched version too.

Code:

<html>
<head>
	<script type="text/javascript" src="/yui/build/utilities/utilities.js"></script>
 	<script type="text/javascript" src="/yui-ext/yui-ext.js"></script>
	<link rel="stylesheet" type="text/css" href="/yui-ext/resources/css/yui-ext.css"/>

<script type="text/javascript">
var test = {
    init: function() {
		var tpl = new YAHOO.ext.DomHelper.Template('<option value="{0}">{1}</option>');
		tpl.append('ddRefreshDb', [0, '-- Select --']);

		var opt = ['One','Two','Three','Four'];

		for (var i=0; i<opt.length; i++) {
			tpl.append('ddRefreshDb', [i+1, opt[i]]);
		}

		var x = getEl('ddRefreshDb').dom.innerHTML;
		alert(x);
    }
};

YAHOO.ext.EventManager.onDocumentReady(test.init, test, true);
</script>
</head>
<body>
	<div style="border:solid 1px red; width:200px;height:200px;padding:50px;">
		<select id="ddRefreshDb" name="ddRefreshDb" style="float:left;margin:0 10px;width:125px"></select>
	</div>
</body>
</html>

**jack.slocum** · 27 Jan 2007 5:32 PM

Inserting options into selects is not supported. IE does not support it.

**JeffHowden** · 27 Jan 2007 7:16 PM

Originally Posted by jacksloc

Inserting options into selects is not supported. IE does not support it.

Perhaps we just have a diffferent understanding of how it's done. I've got a couple of working examples of dynamically populating selects with both options and optgroups with options.

**tryanDLS** · 27 Jan 2007 7:23 PM

Yeah once again, IE sucks. Not worth hacking a special case into DomHelper for this either - just do it the regular way.

Code:

var opt = ['One','Two','Three','Four'];
var dd = getEl('ddRefreshDb).dom;

for (var i=0; i<opt.length; i++) {
   dd.options.add(new Option(opt[i], i));
}

**JeffHowden** · 27 Jan 2007 7:39 PM

Originally Posted by tryanDLS

Yeah once again, IE sucks. Not worth hacking a special case into DomHelper for this either - just do it the regular way.

Code:

var opt = ['One','Two','Three','Four'];
var dd = getEl('ddRefreshDb).dom;

for (var i=0; i<opt.length; i++) {
   dd.options.add(new Option(opt[i], i));
}

I guess I need to dig alittle deeper into DomHelper then to find out what specifically it's trying to do when inserting options. I've got some fairly standard code that works just fine so I suspect that maybe it's not necessarily an IE issue specifically.

**tryanDLS** · 28 Jan 2007 7:55 AM

It's not doing anything different than what it does for other elements. the DOM insertAdjacentHTML method doesn't handle Option insertion into a SELECT in IE.

**jack.slocum** · 28 Jan 2007 12:24 PM

IE doesn't support any HTML injection with selects. Sorry, I should have been a little clearer.

**aconran** · 28 Jan 2007 9:46 PM

I came across this same issue on Friday. I ended up just using the Option constructor and options.add too. Works in IE and FF and seems to be W3C standards compliant.

**skpajther** · 4 Jun 2008 11:49 PM

Hi guys,

I am new to this forum and could really appreciate your help with something. I am working on a Google Sky application for the University of Washington Department of Astronomy.
OK so when a user types in an incorrect address, we give them a handy "did you mean..." list. You may find my site here. The code I am wondering about is here:

Code:

//pans above the address the user typed in
function panAboveAddressMulti(){
//make the top bar visible
document.getElementById("TopBar").style.width = 640;
document.getElementById("TopBar").style.height = 23;
if (!response||response.Status.code200) {
//reponse.Status.code=200 means at least one address was found
document.getElementById("TopBar").innerHTML = "Sorry, we were unable to find that address.";
document.getElementById('addressInputField').focus ();
}
else {
if(response.Placemark.length==1)
//address found immediately
addressFound({address: response.Placemark[0].address,
dec: response.Placemark[0].Point.coordinates[1],
ra: lon2ra(response.Placemar[0].Point.coordinates[0])
});
else {
//prepare the list
var list = document.createElement("select");
for (var i=0; i<response.Placemark.length; i++) {
var place = response.Placemark[i];
var temp = document.createElement('option');
temp.text = place.address;
//a hack to allow the options to carry non-html information
temp.setAttribute("id", place.address);
temp.setAttribute("value", place.Point.coordinates[1]); //dec
temp.setAttribute("label", lon2ra(place.Point.coordinates[0])); //ra
temp.setAttribute("onClick", "addressFound({address:this.id,dec:this.value,ra:t his.label});");
try {
list.add(temp,null);
}
catch(ex) {
list.add(temp); // IE only
}
}
//paint the list in the top bar
document.getElementById("TopBar").innerHTML = "Address not found. Did you mean ";
document.getElementById("TopBar").appendChild(list );
document.getElementById("TopBar").innerHTML += " ?";
}
}
});
}
}

OK wow sorry if this is really annoying to read. But basically I know place.address is working fine, and all of this works perfectly in FFX. But for some reason, when IE paints the list into TopBar, the options are numbers instead of Strings representing the addresses. Does anyone know why IE is doing this?

DomHelper builds bad HTML for Select options in IE

Thread Tools

Search Thread

Display

DomHelper builds bad HTML for Select options in IE

DomHelper builds bad HTML for Select options in IE

adding to a select okay, adding the select bad

adding to a select okay, adding the select bad

Similar Threads

Possible to rectangular select marquee for multiple select?

Use of Ext Element: adding /replace options in a select box?

Thoughts on commercial options.

0.33 beta 3 DomHelper fails to insert html with IE