I have written Javascript which populates a form with <select> elements
dynamically based on some other stuff going on in the page. The
problem is that I can't get it to work properly in IE, and the closest
I can get to it working doesn't work in FireFox.
The first thing IE does wrong is that it only selects the last <option>
even though the multiple attribute is set on the <select>.
The other thing it does wrong is that it doesn't display the text that
has been assigned to the text attribute of the <option>.
Here's a relevant mskb article which doesn't solve my problem:
http://support.microsoft.com/default...78&Product=iep
Here's information about the add() DOM level 2 function:
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-14493106
Here's a file demonstrating the problem:
<html>
<body>
<a href="#" onclick="return clicker(false); ">only selects last element
(bad/unexpected)</a><br/>
<a href="#" onclick="return clicker(true);" >alert somehow causes IE to
select all elements</a>
<form id="meow">
</form>
<script type="text/javascript">
function clicker(alertit )
{
var theform = document.getEle mentById("meow" );
var myselect = document.create Element("SELECT ");
var optionTemplate = new Option("blank", "blank");
alert(optionTem plate.text);
for(var i = 0; i < 5; i++)
{
optionTemplate. text = String(i);
optionTemplate. value = i;
//myselect.append Child(optionTem plate.cloneNode (true)); //appendChild
doesnt work right in IE
//myselect.add(op tionTemplate.cl oneNode(true), null); //works in FF,
not in IE (type mismatch)
myselect.add(op tionTemplate.cl oneNode(true)); //works in IE, not in
FF (not enough arguments)
}
theform.appendC hild(myselect);
myselect.multip le = true;
for(var i = 0; i < 5; i++)
{
if(alertit)
alert(i);
myselect.option s[i].selected = true;
}
return false;
}
</script>
</body>
</html>
