473,785 Members | 3,134 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.appN ame.match(/Internet Explorer/)) {
unselist = document.create Element("<SELEC T MULTIPLE>");
} else {
unselist = document.create Element("SELECT ");
unselist.multip le = true;
}

Thanks!

Dec 15 '05 #1
6 7257
> "Adam Tilghman" <at*******@gmai l.com> wrote:
news:11******** **************@ z14g2000cwz.goo glegroups.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.appN ame.match(/Internet Explorer/)) {
unselist = document.create Element("<SELEC T MULTIPLE>");
} else {
unselist = document.create Element("SELECT ");
unselist.multip le = 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.cre ateElement && document.insert Before && document.append Child){
sel = document.create Element('select ');
p = document.create Element('p');
document.forms[0].insertBefore(p ,document.forms[0].childNodes[0]);
p.appendChild(s el);
sel.id='f';
sel.size='3';
sel.multiple='t rue';
for (i=0, j=info.length; i<j; i++) {
x = info[i];
sel.appendChild (document.creat eElement('optio n'));
sel.options[i].text=sel.optio ns[i].value=x;
}
if(document.rep laceNode && document.cloneN ode && document.getEle mentById){
clone=document. getElementById( 'f').cloneNode( true);
document.getEle mentById('f').r eplaceNode(clon e);
for (i=0, j=clone.options .length; i<j; i++) {
clone.options[i].selected=false ;
}}}
document.body.s tyle.display='n one';
document.body.s tyle.display='' ;
}
if(window.attac hEvent){
window.attachEv ent('onload', pu);
}
else if(window.addEv entListener){
window.addEvent Listener('load' , pu, false);
}
</script>
</head>
<body>
<form name="myform" id="myform" action="javascr ipt: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*******@gmai l.com> wrote:
news:11****** *************** *@z14g2000cwz.g ooglegroups.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.matc h()"?

if (navigator.appN ame.match(/Internet Explorer/)) {
unselist = document.create Element("<SELEC T MULTIPLE>");
} else {
unselist = document.create Element("SELECT ");
unselist.multip le = 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.cre ateElement && document.insert Before && document.append Child){


If document.create Element 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.create Element('select ');
p = document.create Element('p');
document.forms[0].insertBefore(p ,document.forms[0].childNodes[0]);
p.appendChild(s el);
sel.id='f';
sel.size='3';
sel.multiple='t rue';
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.creat eElement('optio n'));
sel.options[i].text=sel.optio ns[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.len gth] = new Option(info[i], info[i]);
}

}
if(document.rep laceNode && document.cloneN ode && document.getEle mentById){
clone=document. getElementById( 'f').cloneNode( true);
What is the point of cloning a node, then replacing it with itself?

document.getEle mentById('f').r eplaceNode(clon e);
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.s tyle.display='n one';
document.body.s tyle.display='' ;


I don't see the point of that.

[...]

function pu()
{
var info=['bob','bobbie', 'bobbie sue'];
var sel, p;
if( !document.creat eElement ||
!document.inser tBefore ||
!document.appen dChild){
return
}
sel = document.create Element('select ');
p = document.create Element('p');
document.forms[0].insertBefore(p ,document.forms[0].childNodes[0]);
p.appendChild(s el);
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.len gth] = new Option(info[i], info[i]);
}
}

--
Rob
Dec 16 '05 #3
> "RobG" <rg***@iinet.ne t.au> wrote:
news:6i******** ********@news.o ptus.net.au....
BootNic wrote: [...] if(document.cre ateElement && document.insert Before &&
document.append Child){
If document.create Element 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.creat eElement('optio n'));
sel.options[i].text=sel.optio ns[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.len gth] = 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.s tyle.display='n one';
document.body.s tyle.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.cre ateElement && document.insert Before &&
document.append Child){


If document.create Element 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.create Element - and IE 4 also has an -
Element.appendC hild - method, but neither implement -
Element.insertB efore - (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.cre ateElement && document.insert Before &&
document.append Child){


If document.create Element 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.ne t.au> wrote:
news:6i****** **********@news .optus.net.au.. ..

BootNic wrote:
[...]
if(document. createElement && document.insert Before &&
document.app endChild){
If document.create Element is supoprted, then support for
insertBefor e 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
15004
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 display the average price in each decile. As background, PRICE is a calculated quantity: I divide a table field SLS_DLRS by a field SLS_UNTS to get it. I also want to include an average SLS_UNTS for each decile. So essentially, I want the result...
3
3033
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 created as selected. May somebody give me an explanation ? <input type="button" value="test" onclick="test()"/> <select name="tagSelect" style="width:100%"> </select>
7
2125
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 javascript reference to basically go to a form and produce a loop which will show me how many select drop down boxes there on a form. Or would i have t use something like
15
2742
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 start at the bottom. What seems to plague many ORM systems is the syntactic confusion and string-manipulation required to build the SQL Statements. If you want to do a Left Outer Join, support nested functions, and a nested conditional clause, you'd...
7
1855
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 that I can decide what's best for the user and what's best for screen flow. Here's the structure: I have what's called "an Event". Each Event can have multiple "Trials". Each "Trial" can multiple "Classes". (This is the structure for a dog...
12
3175
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 restarting the application. What I did was to create an AppDomain that loaded the plugins and everything was great, until I tried to pass something else that strings between the domains...
2
3110
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 wrong? You can see ALL the values present in the url: http://myserver/test.php?notify_user_id%5B2%5D=1&notify_user_id%5B2%5D=2&notify_user_id%5B4%5D=2&notify_user_id%5B4%5D=3&notify_user_id%5B4%5D=4&notify_user_id%5B6%5D=4&btn_updcats=Update e.g. ...
0
1823
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 that simply by using custom actions . 1st create setup and deployment project... add->new project->windows application name it ReadmeDilogue now customize Form as per ur requirement now again
17
46563
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: The goal of this tutorial is to design a Data Abstraction Layer (DAL) in PHP, that will allow us to ignore the intricacies of MySQL and focus our attention on our Application Layer and Business Logic. Hopefully, by the end of this guide, you will...
0
9643
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9947
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8971
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7496
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6737
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5380
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5511
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4046
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2877
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.