PDA

Click to See Complete Forum and Search --> : dynamic select list in ie

tuosu
05-10-2004, 05:42 AM
Following code creates select list dynamically. I wanna find the way to select all values in created select list, but nothing seems to be work with ie. All other browsers works fine. Have not find yet any solution for this problem even search many times all over the net.

var selectlist = document.createElement('select');
selectlist.id = 'id';
selectlist.multiple = "multiple";
selectlist.size = "6";

var options = new Array("first","second","thrid","fourth","fifth");
for (var i=0;i<options.length;i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(options[i]));
option.value = options[i];
option.selected = true;
selectlist.appendChild(option);
}

getObject("placeInHTML").appendChild(selectlist);

for (var i=0;i<form['id'].options.length;i++) {
for (var k=0;k<options.length;k++) {
if (form['id'].options[i].value == options[k].trim()) {
form['id'].options[i].selected = true;
break;
}
}
}

getObject is the function which return div-element on the html.
Fang
05-10-2004, 01:33 PM
IE does not update the DOM correctly, especially where forms are concerned.
You can see the effect if you insert the same select twice(original is correct the new one not).
Adding an alert and then inserting the attributes works, but you don't want an alert.
You will probably have to use innerHTML to insert the select correctly.

You could sent fredmv a pm. I vaguely recall he knew a way to "update" the DOM.

Your form referencing is not wholly correct and the trim function is not JS.
tuosu
05-11-2004, 12:09 AM
Thanks for nothing. I already knew that alert makes everything work but that is not solution. Still looking for the holy truth.

Your form referencing is not wholly correct and the trim function is not JS

Form is defined ealier in my code and trim works also, cause it is
my own function.
Fang
05-11-2004, 01:22 PM
Here's the solution:
The form must be in a table for the size attribute to work.
Before all/multiple options are selected a focus must be called.
The basic script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add multi select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
function InsertSelect() {
var NodeToAddSelect = document.getElementById('placeInHTML');
var selectlist = document.createElement('select');
selectlist.name="sname";
selectlist.id="sid";

var ops = new Array("first","second","thrid","fourth","fifth");
for (var i=0;i<ops.length;i++) {
var o = document.createElement("option");
var t = document.createTextNode(ops[i]);
o.setAttribute("value",ops[i]);
o.appendChild(t);
selectlist.appendChild(o);
}

NodeToAddSelect.appendChild(selectlist);
selectlist.multiple="multiple";
selectlist.size=5;
// Must focus to be able to select all
document.getElementById('sid').focus();

var f=document.getElementById('sid');
for (var i=0;i<f.length;i++) {
f[i].selected = true;
}
}
//-->
//]]>
</script>

</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td>
<form action="#" name="myform" method="post">
<div id="placeInHTML">
</div>
<button type="button" value="" onclick="InsertSelect()">insert</button>
</form>
</td></tr>
</table>
</body>
</html>

Tested in Moz, IE and Opera.
fredmv
05-11-2004, 02:46 PM
Originally posted by tuosu
Thanks for nothing.Lose the attitude.
tuosu
05-12-2004, 12:17 AM
Thanks Fang to find out the solution for me. I also tried to do that with innerHTML and it works fine, but this your last solution is smt i was looking for.

Before all/multiple options are selected a focus must be called

Luckily there is the way..
Fang
05-12-2004, 04:35 AM
update: The addition of the table element is not necessary.
Another strategically placed focus is all that is required.
//code snippet
NodeToAddSelect.appendChild(selectlist);
// Must focus before changing/adding attrributes
document.getElementById('sid').focus();
selectlist.multiple="multiple";
selectlist.size=5;

"focusing" on an element apparently updates the DOM in IE.