By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,520 Members | 1,246 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,520 IT Pros & Developers. It's quick & easy.

Dynamic <select multiple> element problems

P: n/a
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>

Jun 28 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
> "re*******@gmail.com" <re*******@gmail.com> wrote:
news:11**********************@p79g2000cwp.googlegr oups.com....

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.

[snip]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var mySelect;
try{
mySelect=
document.createElement('<select name="willie" size="3" multiple><\/select>');
}
catch(myError){mySelect=null;}
if(!mySelect || !mySelect.name){
mySelect=document.createElement('select');
mySelect.name='willie';
mySelect.size='3';
mySelect.multiple=true;
}
function mSelect(elm){
elm.firstChild.data=(elm.firstChild.data=='add select')?
'remove select':
'add select';
var theform = document.forms.meow;
mySelect.options.length=0;
if(theform.elements.willie){
var elmSelect=theform.elements.willie;
elmSelect.parentNode.removeChild(elmSelect);
elmSelect=null;
return;
}
for(var i = 0; i < 5; i++){
mySelect.options[i]=new Option(i,i);
mySelect.options[i].selected = true;
}
document.getElementById('formDiv').appendChild(myS elect);
}
</script>
<title></title>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
</head>
<body>
<div>
<span onclick="mSelect(this);" style=
"cursor:pointer;color:blue;">add select</span>
</div>
<form action="javascript:void(this)" id="meow">
<div id="formDiv"></div>
</form>
</body>
</html>

--
BootNic Thursday, June 29, 2006 4:47 AM

Good communication is as stimulating as black coffee and just as hard
to sleep after.
*Anne Morrow Lindbergh*

Jun 29 '06 #2

P: n/a

BootNic wrote:
"re*******@gmail.com" <re*******@gmail.com> wrote:
news:11**********************@p79g2000cwp.googlegr oups.com....

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.

[snip]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var mySelect;
try{
mySelect=
document.createElement('<select name="willie" size="3" multiple><\/select>');
}
catch(myError){mySelect=null;}
if(!mySelect || !mySelect.name){
mySelect=document.createElement('select');
mySelect.name='willie';
mySelect.size='3';
mySelect.multiple=true;
}


Creating the select with document.createElement('<select name=""
size="" multiple<\/select>'); in IE solved the problem. Thanks for
your help!

Jun 29 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.