Creating SELECT MULTIPLE via DOM methods

12-15-2005

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!

12-16-2005

> "Adam Tilghman" <> wrote:
> news: oups.com....
>
> 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[i];
sel.appendChild(document.createElement('option'));
sel.options[i].text=sel.options[i].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[i].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>

--
BootNic Thursday, December 15, 2005 7:29 PM

You can discover what your enemy fears most by observing the means he uses to frighten you.
*Eric Hoffer*

12-16-2005

BootNic wrote:
>>"Adam Tilghman" <> wrote:
>>news: groups.com....
>>
>>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[i];
> sel.appendChild(document.createElement('option'));
> sel.options[i].text=sel.options[i].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[i], info[i]);
}

> }
> 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[i].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[i], info[i]);
}
}

--
Rob

12-16-2005

> "RobG" <> wrote:
> news:6ipof.358$....
>
>> 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[i];
>> sel.appendChild(document.createElement('option'));
>> sel.options[i].text=sel.options[i].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[i], info[i]);
> }

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?

[...]
>> clone=document.getElementById('f').cloneNode(true) ;

>
> 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.
>> }}}
>> document.body.style.display='none';
>> document.body.style.display='';
>
> 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*

12-16-2005

RobG wrote:
> BootNic wrote:
<snip>
>> if(document.createElement && document.insertBefore &&
>> document.appendChild){
>
> 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.

12-16-2005

RobG wrote:

> 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.

No. <URL:http://PointedEars.de/scripts/test/whatami>, § 2.

PointedEars

12-16-2005

BootNic wrote:
>>"RobG" <> wrote:
>>news:6ipof.358$....
>>
>>
>>>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.

>>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?

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.

--
Rob

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Creating custom methods to use with HTML DOM objects	bizt	Javascript	1	06-03-2008 05:01 PM
OPTION elements added to a dynamically created SELECT box via DOM are not visible in IE	Robert Oschler	Javascript	1	09-03-2005 10:28 AM
Select DOM node(s) via text highlighting	mail.goodies@gmail.com	Javascript	2	01-16-2005 12:03 PM
How to access <select> value via DOM?	Joshua Beall	HTML	16	10-20-2004 06:28 PM
select of select box will select multiple in another box	palmiere	Javascript	1	02-09-2004 01:11 PM