Add Item to SELECT - IE but not Mozilla

Discussion in 'Javascript' started by GD, Mar 7, 2005.

  1. GD

    GD Guest

    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
     
    GD, Mar 7, 2005
    #1
    1. Advertising

  2. 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-Level-2-HTML-20030109/html.html#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
     
    Dietmar Meier, Mar 7, 2005
    #2
    1. Advertising

  3. GD

    GD Guest

    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
     
    GD, Mar 7, 2005
    #3
  4. GD

    RobG Guest

    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.
     
    RobG, Mar 7, 2005
    #4
  5. GD

    Fred Oz Guest

    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
     
    Fred Oz, Mar 7, 2005
    #5
  6. 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.
     
    Michael Winter, Mar 7, 2005
    #6
  7. 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.
     
    Michael Winter, Mar 7, 2005
    #7
  8. GD

    RobG Guest

    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
     
    RobG, Mar 7, 2005
    #8
  9. GD

    GD Guest

    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
     
    GD, Mar 7, 2005
    #9
  10. 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.
     
    Michael Winter, Mar 7, 2005
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ssoss

    Display Related Item or Add Item

    ssoss, Sep 17, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    516
    ssoss
    Sep 19, 2003
  2. Henri
    Replies:
    9
    Views:
    1,904
    Toby Inkster
    Feb 22, 2005
  3. K. Lobe

    How do I select item in <SELECT>

    K. Lobe, Jul 2, 2003, in forum: ASP General
    Replies:
    3
    Views:
    144
    K. Lobe
    Jul 2, 2003
  4. Namor
    Replies:
    0
    Views:
    337
    Namor
    Jan 19, 2006
  5. Jim Ley
    Replies:
    3
    Views:
    231
Loading...

Share This Page