Adding OPTION to SELECT using appendChild

[anjanesh]

Hi

For some reason this doesnt work in IE.

var oSelect = document.createElement('select');
oSelect.name = 'Year[]';
for (var i=1950; i<=2005; i++)
 {
		var oOption = document.createElement("option");
		oOption.text = i;
		oOption.value = i;
		oSelect.appendChild(oOption);
 }

oSelect.add(oOption); works in IE but doesnt in FF.
Although, its mentioned here that appendChild applies to OPTION too.

How do I get this working on both browsers ?

Thanks

[Pepejeria]

Use the add() and remove() methods of the select instead.

The add method takes 2 parameters, first one is the option node to add and the second one is the node to add before to. If you pass in null as the second argument, then the new option will be added in the last position.

There is a diffrence how IE implemented this though (surprise!). And that is the second argument, instead IE expects a number where to add the option.

A cross-browser solution could look like this:

<script type="text/javascript">
var bIE = /MSIE/.test(navigator.userAgent);
var oSelectNode = document.createElement("select");
var oOptionNode = document.createElement("option");

for(var i=1; i<=10; i++)
{
	var oOption = oOptionNode.cloneNode(false);
	oOption.text = "Option nr. " + i;
	oSelectNode.add(oOption, bIE? i : null);
}

document.body.appendChild(oSelectNode);
</script>

Though personally I think its really bad when you have to do browser detection, so an alternative would be to do it old school:

var oSelectNode = document.createElement("select");

for(var i=0; i<10; i++)
{
	var oOption = new Option("Option nr. " + (i + 1));
	oSelectNode.options[oSelectNode.options.length] = oOption;
}

document.body.appendChild(oSelectNode);

[jtrelfa]

The old school method has never failed me...DOM manipulation can sometimes be a pain.

</two cents>