Creating SELECT MULTIPLE via DOM methods

A

Adam Tilghman

Hi all,

I have found that IE doesn't seem to respect the <SELECT> "multiple"
attribute when set using DOM methods, although the attribute/property
seems to exist and is updated properly. Those changes just don't make
it onto the screen.

Am I doing something wrong here?
If not, is there a better feature test I can use than
"appName.match()"?

if (navigator.appName.match(/Internet Explorer/)) {
unselist = document.createElement("<SELECT MULTIPLE>");
} else {
unselist = document.createElement("SELECT");
unselist.multiple = true;
}

Thanks!
 
B

BootNic

Adam Tilghman said:
Hi all,

I have found that IE doesn't seem to respect the <SELECT> "multiple"
attribute when set using DOM methods, although the
attribute/property seems to exist and is updated properly. Those
changes just don't make it onto the screen.

Am I doing something wrong here?
If not, is there a better feature test I can use than
"appName.match()"?

if (navigator.appName.match(/Internet Explorer/)) {
unselist = document.createElement("<SELECT MULTIPLE>");
} else {
unselist = document.createElement("SELECT");
unselist.multiple = true;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<title></title>
<script type="text/javascript">
function pu(){
var info=['bob','bobbie','bobbie sue'];
var clone,x,i,j,sel,p;
if(document.createElement && document.insertBefore && document.appendChild){
sel = document.createElement('select');
p = document.createElement('p');
document.forms[0].insertBefore(p,document.forms[0].childNodes[0]);
p.appendChild(sel);
sel.id='f';
sel.size='3';
sel.multiple='true';
for (i=0, j=info.length; i<j; i++) {
x = info;
sel.appendChild(document.createElement('option'));
sel.options.text=sel.options.value=x;
}
if(document.replaceNode && document.cloneNode && document.getElementById){
clone=document.getElementById('f').cloneNode(true);
document.getElementById('f').replaceNode(clone);
for (i=0, j=clone.options.length; i<j; i++) {
clone.options.selected=false;
}}}
document.body.style.display='none';
document.body.style.display='';
}
if(window.attachEvent){
window.attachEvent('onload', pu);
}
else if(window.addEventListener){
window.addEventListener('load', pu, false);
}
</script>
</head>
<body>
<form name="myform" id="myform" action="javascript:void(this)">
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
 
R

RobG

BootNic said:
Hi all,

I have found that IE doesn't seem to respect the <SELECT> "multiple"
attribute when set using DOM methods, although the
attribute/property seems to exist and is updated properly. Those
changes just don't make it onto the screen.

Am I doing something wrong here?
If not, is there a better feature test I can use than
"appName.match()"?

if (navigator.appName.match(/Internet Explorer/)) {
unselist = document.createElement("<SELECT MULTIPLE>");
} else {
unselist = document.createElement("SELECT");
unselist.multiple = true;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<title></title>
<script type="text/javascript">
function pu(){
var info=['bob','bobbie','bobbie sue'];
var clone,x,i,j,sel,p;
if(document.createElement && document.insertBefore && document.appendChild){

If document.createElement is supoprted, then support for insertBefore
and appendChild can probably be safely infered.

Why wait until later to test for other necessary features? Do it all
up-front, no point in making the new select if you can't add it to the
document.

sel = document.createElement('select');
p = document.createElement('p');
document.forms[0].insertBefore(p,document.forms[0].childNodes[0]);
p.appendChild(sel);
sel.id='f';
sel.size='3';
sel.multiple='true';

You must add a name attribute or the select will not be sucessful and
won't be submitted.

for (i=0, j=info.length; i<j; i++) {
x = info;
sel.appendChild(document.createElement('option'));
sel.options.text=sel.options.value=x;


Some versions of IE have trouble with creating options that way, try:

for (i=0, j=info.length; i<j; i++) {
sel[sel.options.length] = new Option(info, info);
}

}
if(document.replaceNode && document.cloneNode && document.getElementById){
clone=document.getElementById('f').cloneNode(true);

What is the point of cloning a node, then replacing it with itself?

document.getElementById('f').replaceNode(clone);
for (i=0, j=clone.options.length; i<j; i++) {
clone.options.selected=false;


When you cloned the select, you did a deep clone so all the options are
already cloned. Having cloned them, you don't add them or replace the
existing ones. You can set the options as selected or not when they are
created.

}}}
document.body.style.display='none';
document.body.style.display='';

I don't see the point of that.

[...]

function pu()
{
var info=['bob','bobbie','bobbie sue'];
var sel, p;
if( !document.createElement ||
!document.insertBefore ||
!document.appendChild){
return
}
sel = document.createElement('select');
p = document.createElement('p');
document.forms[0].insertBefore(p,document.forms[0].childNodes[0]);
p.appendChild(sel);
sel.id = 'f';
sel.name = 'f';
sel.size = '3';
sel.multiple = 'true';

for (var i=0, j=info.length; i<j; i++) {
sel[sel.options.length] = new Option(info, info);
}
}
 
B

BootNic

RobG said:
BootNic wrote: [...]
if(document.createElement && document.insertBefore &&
document.appendChild){

If document.createElement is supoprted, then support for
insertBefore and appendChild can probably be safely infered.

Why wait until later to test for other necessary features? Do it
all up-front, no point in making the new select if you can't add it
to the document.


Did I miss a feature test that was needed to add the select or the options?

[...]
You must add a name attribute or the select will not be sucessful
and won't be submitted.


Yup a name would help, sometimes I forget forms are actually submitted
from time to time, but then again, like this one, some are not.
for (i=0, j=info.length; i<j; i++) {
x = info;
sel.appendChild(document.createElement('option'));
sel.options.text=sel.options.value=x;


Some versions of IE have trouble with creating options that way,
try:

for (i=0, j=info.length; i<j; i++) {
sel[sel.options.length] = new Option(info, info);
}



Yup they do, and if they are not added in the manner that
these were, that would make the next if statement rather
useless wouldn't it?

[...]
What is the point of cloning a node, then replacing it with itself?


To redraw the node, and correct the display issue that results from
the way it was created, which is the point of this if statement.

[...]
When you cloned the select, you did a deep clone so all the options
are already cloned. Having cloned them, you don't add them or
replace the existing ones. You can set the options as selected or
not when they are created.

I don't see the point of that.


This is to correct a display issue Mozilla has. Without it the submit button
would be jammed up tight to the select, when the submit is clicked then it
would jump down to where it belongs. It may not be noticed if the form is
actually submitted.

[...]

--
BootNic Friday, December 16, 2005 12:27 AM

Optimism and humor are the grease and glue of life. Without both of them
we would never have survived our captivity.
*Philip Butler, Vietnam POW*
 
R

Richard Cornford

RobG said:
BootNic wrote:

If document.createElement is supoprted, then support for
insertBefore and appendChild can probably be safely infered.
<snip>

No it would not be safe to make that inference. Both Opera 6 and IE 4
implement - document.createElement - and IE 4 also has an -
Element.appendChild - method, but neither implement -
Element.insertBefore - (and neither of the methods are W3C standard
versions on those browsers).

I am not aware of a browser where you could not infer the W3C standard
createElement and appendChild methods from finding insertBefore, but the
existence of browsers where your proposed inference would be false
demonstrates that any inference about a browser's DOM is dangerous, even
with a wide familiarity with browser object models.

The object inference strategy has always suffered from pre-supposing a
complete knowledge of _all_ browser object models (past, present and
possibly future) before it could be considered valid/safe, and such
omniscience has never been possessed by any individual in practice and
is theoretically unachievable. (With the individuals who put most effort
into the understanding of a wide range of browser object models tending
to be the most convinced that knowing all browsers in the required
detail is impractical/impossible).

It would be safest to infer nothing if possible, and a good principle to
always infer as little as practical.

Richard.
 
R

RobG

BootNic said:
BootNic wrote:
[...]
if(document.createElement && document.insertBefore &&
document.appendChild){

If document.createElement is supoprted, then support for
insertBefore and appendChild can probably be safely infered.

RC & Thomas your comments are noted - that was bad advice.

Did I miss a feature test that was needed to add the select or the options?

No, but you later do stuff with cloneNode, getElementById, etc. If they
were necessary, then you may as well test for them too before going any
further. I don't think they are needed at all, so the point is moot.

[...]
You must add a name attribute or the select will not be sucessful
and won't be submitted.

Yup a name would help, sometimes I forget forms are actually submitted
from time to time, but then again, like this one, some are not.

Why have a submit button on a form with no successful controls?

[...]
What is the point of cloning a node, then replacing it with itself?
[...]
I don't see the point of that.

This is to correct a display issue Mozilla has. Without it the submit button
would be jammed up tight to the select, when the submit is clicked then it
would jump down to where it belongs. It may not be noticed if the form is
actually submitted.

Your 'fix' is to add the select and options to the form, clone it and
all the options, replace the original with the clone, go through all the
options and deselect them (if they have just been created with
createElement none will be selected and they have never been displayed
so the user can't have selected any), then hide everything and
re-display it.

That seems extraordinary given that an alternative is to use DIVs
instead of Ps and just add the select once. Div elements are more
appropriate anyway - form controls should not be marked-up as if they
are paragraphs of text.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top