Array function SPLICE doesn't work with Select->OPTIONS array. JavaScript

Discussion in 'Javascript' started by BrianP, Sep 17, 2005.

  1. BrianP

    BrianP Guest

    Hi,
    I have had to invent a work-around to get past what looks like a
    JavaScript bug, the malfunctioning Perl-like JavaScript array functions
    including SPLICE() and UNSHIFT().

    I have boiled it down to a very simple test case which can be
    cut-n-pasted into a .html file and viewed in a browser:

    ============================================================================

    <META HTTP-EQUIV="expires" VALUE="Tue, 23 Jun 1998 01:46:05
    GMT"><!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"
    xml:lang="en-US">
    <head>
    <title>Weird JavaScript Array Function Malfunction!</title>
    <meta name="expires" content="Tue, 23 Jun 1998 01:46:05 GMT" />
    <script type="text/javascript">//<![CDATA[

    function resort() {
    var sortara = new Array;
    sortara = document.aceform.sort.options;
    var length = sortara.length;
    alert("SortAra length = " + sortara.length)
    var selidx = document.aceform.sort.selectedIndex;
    alert("Selected Index = " + selidx);
    var selected = sortara[selidx];
    alert("Selected item = " + selected.text);
    selected = sortara.splice(selidx, 1); // Remove selected array item.
    alert("Selected item = " + selected.text); // Never gets here.
    Error.
    sortara.unshift(selected); // Insert item at top of array.

    }

    //]]></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    />
    </head>
    <body bgcolor="#B0CEBE">
    <form method="post" action="" enctype="multipart/form-data"
    name="aceform">
    <center>

    <table border="2" cellspacing="2" cellpadding="2">
    <tr><td><center>Sort</td></tr>
    <tr><td align="center">
    <select name="sort" size="4" onchange="resort(this)">
    <option value="Item1">Item1</option>
    <option value="Item2">Item2</option>
    <option value="Item3">Item3</option>
    <option value="Item4">Item4</option>
    </select></td>
    </tr>
    </table>
    </center><div></div></form>
    </body>
    </html>
    =========================================================================

    The intent of this script is to move the selected item to the to of the
    menu. What could be simpler? Something similar to the Perl one-liner:
    unshift(@array, splice(@array, $selectIndex, 1)); # Move SelIdx item
    to top.

    In a JavaScript console in Firefox 1.0.6 as well as in Opera and
    evilnet explorer, I get the error message, "Error: sortara.splice is
    not a function". Sortara is valued with
    "document.aceform.sort.options", and options is an array.

    The first 3 alerts show exactly what they should. The array length
    comes out to 4, the selected item shows 3 if I click on the last item,
    and the item description matches my selection, "Item3" if I choose the
    last one. The final alert is never reached, but instead the JavaScript
    terminates and a new error message (above) is written to the JS
    console.

    The 'Reilly Rhino book, "JavaScript, The Definitive Guide" documents
    the select object's OPTIONS property as, "An ARRAY of option objects
    ...."

    I can only find 3 hits on this in Google. Is this a real JavaScript bug
    or am I loosing it?

    THX,

    BrianP
     
    BrianP, Sep 17, 2005
    #1
    1. Advertising

  2. Re: Array function SPLICE doesn't work with Select->OPTIONS array.JavaScript

    BrianP wrote:


    > var sortara = new Array;
    > sortara = document.aceform.sort.options;
    > var length = sortara.length;
    > alert("SortAra length = " + sortara.length)
    > var selidx = document.aceform.sort.selectedIndex;
    > alert("Selected Index = " + selidx);
    > var selected = sortara[selidx];
    > alert("Selected item = " + selected.text);
    > selected = sortara.splice(selidx, 1); // Remove selected array item.


    > In a JavaScript console in Firefox 1.0.6 as well as in Opera and
    > evilnet explorer, I get the error message, "Error: sortara.splice is
    > not a function". Sortara is valued with
    > "document.aceform.sort.options", and options is an array.


    You may think that options is an array but DOM collections are usually
    not implemented as JavaScript arrays in current browsers. The options
    property of a select gives you a DOM collection and while that has a
    length property and some properties you can access with a number index
    that does not mean the object is an Array object instance implementing
    all methods that native Array object instances have.
    So the error message tells you that the DOM object you are trying to
    call a 'splice' method on does not have that method.

    The W3C DOM specification lists
    <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-30606413>
    so in a browser following that specification options implements the
    HTMLOptionsCollection interface
    <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTMLOptionsCollection>
    where you have a length property and two methods item and namedItem.
    Within ECMAScript implementations of the DOM
    <http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html> you can
    then use
    options[index]
    instead of
    options.item(index)
    and
    options[name]
    instead of
    options.namedItem(name)

    But that is all the DOM suggests, nothing requiring or suggesting that
    there are any methods native JavaScript arrays implement.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Sep 17, 2005
    #2
    1. Advertising

  3. BrianP

    RobG Guest

    Re: Array function SPLICE doesn't work with Select->OPTIONS array.JavaScript

    BrianP wrote:
    > Hi,
    > I have had to invent a work-around to get past what looks like a
    > JavaScript bug, the malfunctioning Perl-like JavaScript array functions
    > including SPLICE() and UNSHIFT().
    >
    > I have boiled it down to a very simple test case which can be
    > cut-n-pasted into a .html file and viewed in a browser:
    >
    > ============================================================================
    >
    > <META HTTP-EQUIV="expires" VALUE="Tue, 23 Jun 1998 01:46:05
    > GMT"><!DOCTYPE html
    > PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"
    > xml:lang="en-US">
    > <head>
    > <title>Weird JavaScript Array Function Malfunction!</title>
    > <meta name="expires" content="Tue, 23 Jun 1998 01:46:05 GMT" />
    > <script type="text/javascript">//<![CDATA[
    >
    > function resort() {
    > var sortara = new Array;
    > sortara = document.aceform.sort.options;
    > var length = sortara.length;
    > alert("SortAra length = " + sortara.length)
    > var selidx = document.aceform.sort.selectedIndex;
    > alert("Selected Index = " + selidx);
    > var selected = sortara[selidx];
    > alert("Selected item = " + selected.text);
    > selected = sortara.splice(selidx, 1); // Remove selected array item.
    > alert("Selected item = " + selected.text); // Never gets here.
    > Error.
    > sortara.unshift(selected); // Insert item at top of array.
    >
    > }
    >
    > //]]></script>
    > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    > />
    > </head>
    > <body bgcolor="#B0CEBE">
    > <form method="post" action="" enctype="multipart/form-data"
    > name="aceform">
    > <center>
    >
    > <table border="2" cellspacing="2" cellpadding="2">
    > <tr><td><center>Sort</td></tr>
    > <tr><td align="center">
    > <select name="sort" size="4" onchange="resort(this)">
    > <option value="Item1">Item1</option>
    > <option value="Item2">Item2</option>
    > <option value="Item3">Item3</option>
    > <option value="Item4">Item4</option>
    > </select></td>
    > </tr>
    > </table>
    > </center><div></div></form>
    > </body>
    > </html>
    > =========================================================================
    >
    > The intent of this script is to move the selected item to the to of the
    > menu. What could be simpler? Something similar to the Perl one-liner:
    > unshift(@array, splice(@array, $selectIndex, 1)); # Move SelIdx item
    > to top.
    >
    > In a JavaScript console in Firefox 1.0.6 as well as in Opera and
    > evilnet explorer, I get the error message, "Error: sortara.splice is
    > not a function". Sortara is valued with
    > "document.aceform.sort.options", and options is an array.
    >
    > The first 3 alerts show exactly what they should. The array length
    > comes out to 4, the selected item shows 3 if I click on the last item,
    > and the item description matches my selection, "Item3" if I choose the
    > last one. The final alert is never reached, but instead the JavaScript
    > terminates and a new error message (above) is written to the JS
    > console.
    >
    > The 'Reilly Rhino book, "JavaScript, The Definitive Guide" documents
    > the select object's OPTIONS property as, "An ARRAY of option objects
    > ..."


    As Martin said, element collections are not arrays.

    If it helps, here's a thread here that shows how to put references to
    the options into an array. Once you've done that you can use the array
    methods on the array of references then re-build the select using just
    the options that are left (or have been added maybe).

    <URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/7074abbe73943dcb/2d46c041ee36bc60?q=Combining+object+arrays&rnum=1&hl=en#2d46c041ee36bc60>

    Just remember that your array will be references to the options, not the
    actual options. If you show what you are trying to do with the options,
    then maybe more help can be provided.



    --
    Rob
     
    RobG, Sep 18, 2005
    #3
    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. Peter

    splice or split an array

    Peter, Sep 7, 2004, in forum: Perl Misc
    Replies:
    3
    Views:
    124
    Anno Siegel
    Sep 8, 2004
  2. Ved

    Array in splice

    Ved, Jul 4, 2007, in forum: Perl Misc
    Replies:
    0
    Views:
    133
  3. Replies:
    1
    Views:
    156
    Richard Cornford
    Jun 26, 2008
  4. dhtml
    Replies:
    18
    Views:
    204
    dhtml
    Aug 23, 2008
  5. gamo

    Problem with splice in a 2D ARRAY

    gamo, Jun 17, 2013, in forum: Perl Misc
    Replies:
    6
    Views:
    219
    Rainer Weikusat
    Jun 17, 2013
Loading...

Share This Page