473,224 Members | 1,506 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,224 software developers and data experts.

Add Item to SELECT - IE but not Mozilla

GD
Hi,

The following code:

<script language="javascript" type="text/javascript">
function lstbox(lstval) {
switch(lstval){
case "Amphipoda" :
document.getElementById("clas").add(new
Option("Gammaridae","Gammaridae"));
break
default : alert("Unknown");
}
}
</script>

Works in IE6 and Opera but not in Mozilla based browsers (NN &
Firefox), causing the following error:

Error: uncaught exception: [Exception... "Not enough arguments
[nsIDOMHTMLSelectElement.add]" nsresult: "0x80570001
(NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame ::
http://localhost/IndicatorsSp/Indicator_search.php?spl :: lstbox ::
line 58" data: no]

What arguments am missing? And is it possible to get it to work in all
browsers?
As an extra, I'd like to clear the listbox when a new switch statement
is triggered.

Many thanks
Dan
Jul 23 '05 #1
9 19053
GD wrote:
[Select].add(new Option("Gammaridae","Gammaridae"));
[...]
Error: uncaught exception: [Exception... "Not enough arguments
[nsIDOMHTMLSelectElement.add]" [...]
What arguments am missing?


http://www.w3.org/TR/2003/REC-DOM-Le...ml#ID-14493106
| Parameters
| element of type HTMLElement
| The element to add.
| before of type HTMLElement
| The element to insert before, or null for the tail of the list.
ciao, dhgm
Jul 23 '05 #2
GD
Thanks for replying Dietmar,

Sorry to appear obtuse, but I don't understand how to implement the
solution in my code. My Javascript knowledge is limited.
Many thanks
GD

Jul 23 '05 #3
GD wrote:
Thanks for replying Dietmar,

Sorry to appear obtuse, but I don't understand how to implement the
solution in my code. My Javascript knowledge is limited.
Many thanks
GD


Using "appendChild" instead of "add" will do the trick.

...
case "Amphipoda" :
document.getElementById("clas").appendChild(new
Option("Gammaridae","Gammaridae"));
break;
...

Also, ensure that the "clas" select element has an id="clas" as
well as a name="clas". IE treats them as synonymous, which is
incorrect.

In IE, getElementById('clas') will return a reference to a form
element with name='clas' even if it has no id - but not so in
Firefox.

For further info, 'name' and 'id' share the same namespace, so if
you want to use the same id and name, they must be on the same
element, but it is not compulsory for the name and id of a
particular element to be the same.

--
Rob.
Jul 23 '05 #4
GD wrote:
<script language="javascript" type="text/javascript">
The language attribute is deprecated and redundant. Don't bother with it.

[snip]
document.getElementById("clas").add(new
Option("Gammaridae","Gammaridae"));
If you're using the W3C DOM to manipulate the document tree, I
personally think it best to use it consistently; create the option
element with the createElement method, rather than the DOM 0 Option
constructor.

[snip]
What arguments am missing?
The W3C DOM defines the HTMLSelectElement.add method as taking two
required arguments - both object references. The first argument you
know. The second specifies where to insert the new element in
precisely the same fashion as the Node.insertBefore method. However,
Microsoft (for whatever reason) do not implement the add method with
the same signature. The second argument is an optional number.

Obviously, these two approaches are incompatible. Whilst the Microsoft
model might be, in this case, better there is no reason why both the
proprietary and standard implementations couldn't be supported
simultaneously: Opera manages it.
And is it possible to get it to work in all browsers?
A potential solution, though untested on Safari, Konqueror, and
earlier Mozilla version, is presented below:

function addOption(element, index, option) {var cN, o;
if('string' == typeof element) {
element = document.getElementById(element);
}
if('string' == typeof option) {
o = document.createElement('option');
o.text = option;
} else {o = option;}

if((cN = element.childNodes)) {
if(2 == element.add.length) {
element.add(
o,
((0 > index) || (cN.length == index)) ? null : cN[index]
);
} else {
element.add(o, index);
}
}
return o;
}

element - Either a reference to a SELECT element, or its id.
index - The position where the new element is to be inserted.
A value of -1 will append the new option.
option - This argument can either be a string representing the
text of the new option, or it can be a reference to
an OPTION element.

The function will return a reference to the new OPTION element. This
allows other properties, like value and selected, to be set once the
element has been added.

The function obviously needs some additional feature testing, and
perhaps a fallback for DOM 0 user agents. However, I think success
with browsers other than IE5.01+, Opera 7.54u1, and Firefox 1.0 needs
to be determined first.
As an extra, I'd like to clear the listbox when a new switch
statement is triggered.


I'm not quite sure what you mean there.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5
GD wrote:
Thanks for replying Dietmar,

Sorry to appear obtuse, but I don't understand how to implement the
solution in my code. My Javascript knowledge is limited.
Many thanks
GD


In your example, use the 'add' method like this (works in IE and
Firefox):

case "Amphipoda" :

document.getElementById("clas").options.add(new
Option("Gammaridae","Gammaridae"));

break;
If you ant to add it at a certain position in the options
collection (say as the 3rd option) using clearer code:

var oOpt = new Option("Gammaridae","Gammaridae");
document.getElementById("clas").options.add(oOpt,2 );

By not specifying a position, or using 'null', the option is
added to the end of the collection. So the appendChild method may
suit you better.

--
Fred
Jul 23 '05 #6
RobG wrote:

[snip]
Using "appendChild" instead of "add" will do the trick.
It seems to fail with IE. Whilst a new OPTION element is given space
on the control, no text appears. Oddly enough, the associated value
can still be submitted. It would seem that IE attaches some special
significance to the add method.

See my post for an (insufficiently tested) alternative.

[snip]
For further info, 'name' and 'id' share the same namespace,
This is true for certain elements, such as FORM and IMG. However, it
is not for form controls (INPUT, SELECT, etc.). In the latter case,
the scope of name attributes is limited to the containing form
(assuming there is one).
If you want to use the same id and name, they must be on the same
element, but it is not compulsory for the name and id of a
particular element to be the same.


This is true for form controls, but not other elements. Elements such
as A or FORM which have a name and an id attribute /must/ share the
same value.

Elements Scope Identical attributes

INPUT, SELECT, Form No
TEXTAREA, BUTTON

A, APPLET, FORM, Document Yes
FRAME, IFRAME,
IMG, MAP

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #7
Michael Winter wrote:
RobG wrote:

[snip]
Using "appendChild" instead of "add" will do the trick.

It seems to fail with IE. Whilst a new OPTION element is given space on
the control, no text appears. Oddly enough, the associated value can
still be submitted. It would seem that IE attaches some special
significance to the add method.

See my post for an (insufficiently tested) alternative.


Yes, I could have sworn I tested it in IE, guess I only did the
"add" version.

[snip]
For further info, 'name' and 'id' share the same namespace,

This is true for certain elements, such as FORM and IMG. However, it is
not for form controls (INPUT, SELECT, etc.). In the latter case, the
scope of name attributes is limited to the containing form (assuming
there is one).
If you want to use the same id and name, they must be on the same
element, but it is not compulsory for the name and id of a
particular element to be the same.

This is true for form controls, but not other elements. Elements such as
A or FORM which have a name and an id attribute /must/ share the same
value.


The vagaries of HTML - consistency? heaven forbid...

I think in future I'll just point to the relevant part of the
spec and be done with it :-p

--
Rob
Jul 23 '05 #8
GD
Michael Winter wrote:
[Very helpful comments and code snipped]

Many thanks for that Michael
As an extra, I'd like to clear the listbox when a new switch
statement is triggered.


I'm not quite sure what you mean there.


Your addOption funtion is triggered from an onChange event in another
listbox. If this onChange event is fired a second time, addOption
appends the new value to the listbox (adds a new option - strangely
enough), I want it to replace the current values.

Thanks again
Dan

Jul 23 '05 #9
GD wrote:

[snip]
Your addOption funtion is triggered from an onChange event in another
listbox. If this onChange event is fired a second time, addOption
appends the new value to the listbox (adds a new option - strangely
enough), I want it to replace the current values.


In principle, you can assign zero (0) to the length property of the
options collection or the SELECT element. An alternative approach is
to use the remove method.

/* With remove */
while(selectElement.length) {selectElement.remove(0);}

/* With length */
selectElement.options.length = 0; /* or selectElement.length */

A potential problem with the simpler "assign to length" approach is
that DOM 1 defined the length property as read-only. However, that was
reversed in DOM 2 to be backward compatible with DOM 0, and I'm not
aware of any user agents that respect the restriction.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #10

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

Similar topics

4
by: Jens Riedel | last post by:
Hi, I use a select box with a fix width (via stylesheet). So some of the entries are cut on the right side if they're too long. Is there a way to display them complete like a tool tip on a...
8
by: dp | last post by:
Is there anyway to have the bullet color of a <li> be a different color than the text without using an image? dp
0
by: Marek Mänd | last post by:
Is there a Mozilla css extension property that would allow me to turn the multiple lined select element selected option to have my custom background color? the -moz-selection doesnt sadly apply...
1
by: Marek Mänd | last post by:
<select multiple style="height:200px;"> <option>a <option>b </select> Why does Mozilla draw the vertical scrollbar to the SELECT html element? There is plenty of void room below two OPTIONs in...
3
by: Jim Ley | last post by:
Hi, It seems the mozilla guys have chosen another (almost certainly poor choice in my initial thoughts) of having document.all evaluate to false, but document.all catch the chicken event - also...
1
by: clarket | last post by:
Hi, Is there any easy way of adding an item to a html list (or does this need to be done server side). What I want to do is have a list wirh about 10 items in it, if the item the user wants to...
1
by: Eric Trav | last post by:
Hello, I am using mozilla and javascript to change the style background color for my select with onfocus() and back to white with onblur(). When i process onfocus(); i have to click on the...
1
by: diaboliko80 | last post by:
Salve a tutti. Ho un problema con IE7. Ho implementato una pagina .asp che tramite tecnologia AJAX mi crea una serie di select nidificate (il classico esempio delle Regioni-Province --scelgo...
1
by: Lorna | last post by:
I have a table on a form containing 2 columns - size type and size. Depending on the size type (Mens, womens, Youth) I want to change the set of sizes available (in an option box). I have been able...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.