Add Item to SELECT - IE but not Mozilla

[Select].add(new Option("Gammaridae","Gammaridae"));
[...]
Error: uncaught exception: [Exception... "Not enough arguments
[nsIDOMHTMLSelectElement.add]" [...]
What arguments am missing?

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

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

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

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.

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.