473,406 Members | 2,273 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

Creating SELECT MULTIPLE via DOM methods

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!

Dec 15 '05 #1
6 7218
> "Adam Tilghman" <at*******@gmail.com> wrote:
news:11**********************@z14g2000cwz.googlegr 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*

Dec 16 '05 #2
BootNic wrote:
"Adam Tilghman" <at*******@gmail.com> wrote:
news:11**********************@z14g2000cwz.google 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
Dec 16 '05 #3
> "RobG" <rg***@iinet.net.au> wrote:
news:6i****************@news.optus.net.au....
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*

Dec 16 '05 #4
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.
Dec 16 '05 #5
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
Dec 16 '05 #6
BootNic wrote:
"RobG" <rg***@iinet.net.au> wrote:
news:6i****************@news.optus.net.au....

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
Dec 16 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Indraneel Sheorey | last post by:
Hello, I want to set up a query in SQL Server that is "grouped by" a variable PRICE. Since PRICE takes on continuous decimal values, I want to create deciles based on this variable and then...
3
by: Max Weber | last post by:
Try to run the code below in a page. You will notice than when you switch the multiple attribute of the SELECT tag, only one option is displayed as selected although multiple options have ben...
7
by: Nick Calladine | last post by:
Hi On my form i have multiple select which all have an id value total1, total2, total3 etc so i am trying to detect how many there are and then use this to caculate a total. Is there a...
15
by: grunar | last post by:
After some thought on what I need in a Python ORM (multiple primary keys, complex joins, case statements etc.), and after having built these libraries for other un-named languages, I decided to...
7
by: Susan Bricker | last post by:
Greetings. As a relative newcomer to Access, I am having trouble deciding on how to design the form flow for updating and creating related records. I'm looking for a variety of suggestions so...
12
by: Mats Lycken | last post by:
Hi, I'm creating a CMS that I would like to be plug-in based with different plugins handling different kinds of content. What I really want is to be able to load/unload plugins on the fly without...
2
by: murraymiken | last post by:
I'm looking to have multiple multiple-select-boxes on a page. But I can only get the contents from the last selected value within a box, via PHP. I've tried numerous methods. What am I doing...
0
by: shanthsp2002 | last post by:
well friends i have a small tip here which may be helpfull for u there may be situations where we need to use a customized dilogue box while doveloping setup and dyployment project, so u can do...
17
Motoma
by: Motoma | last post by:
This article is cross posted from my personal blog. You can find the original article, in all its splendor, at http://motomastyle.com/creating-a-mysql-data-abstraction-layer-in-php/. Introduction:...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.