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.getElementById("meow");
var myselect = document.createElement("SELECT");
var optionTemplate = new Option("blank","blank");
alert(optionTemplate.text);
for(var i = 0; i < 5; i++)
{
optionTemplate.text = String(i);
optionTemplate.value = i;
//myselect.appendChild(optionTemplate.cloneNode(true )); //appendChild
doesnt work right in IE
//myselect.add(optionTemplate.cloneNode(true), null); //works in FF,
not in IE (type mismatch)
myselect.add(optionTemplate.cloneNode(true)); //works in IE, not in
FF (not enough arguments)
}
theform.appendChild(myselect);
myselect.multiple = true;
for(var i = 0; i < 5; i++)
{
if(alertit)
alert(i);
myselect.options[i].selected = true;
}
return false;
}
</script>
</body>
</html>
