Why doesn't this work in Firefox?

Discussion in 'Javascript' started by paulbradleysmith@gmail.com, Jan 23, 2006.

  1. Guest

    Here's a simple script to update the contents of one select based on
    the user's choice in a second select. It works fine in IE, but not at
    all in Firefox. Can anyone shed light on the matter? Thanks.


    Brad Smith
    <html>
    <head>
    <title>Interests</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">

    <script Language="JavaScript">
    var i;
    function AddItem(){
    var oOption = document.createElement("OPTION");
    oOption.text=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].text;
    oOption.value=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].value;
    document.myForm.Interests.add(oOption);
    document.myForm.SelectInterest.selectedIndex=0;
    }
    </script>
    <form name="myForm" method="post" action="">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>
    <select name="SelectInterest" onChange="AddItem()">
    <option>Please make a selection</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select>
    <br>
    <br>
    <select name="Interests" size="10" >
    </select>
    </p>
    <input name="Clear List" type="button"
    onClick="document.myForm.Interests.options.length = 0 " value="Clear
    List">
    </form>
    </body>
    </html>
    , Jan 23, 2006
    #1
    1. Advertising

  2. Guest

    Just figured it out. IE and Firefox require different argument subsets
    for the .add method. This code tries one add method and if there's an
    error, tries a backup method. I found the answer on
    http://www.webdeveloper.com/forum/archive/index.php/t-56561.html


    --pbs

    <script Language="JavaScript">
    var i;
    function AddItem(){
    var oOption = document.createElement("OPTION");
    oOption.text=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].text;
    oOption.value=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].value;
    addOption(document.myForm.Interests, oOption);
    document.myForm.SelectInterest.selectedIndex=0;
    }
    // Add a new option to a select element
    function addOption(selectElement,newOption) {
    // First try the DOM2 method ...
    try {
    selectElement.add(newOption,null);
    }
    // ... And if that doesn't work use the IE-only method
    catch (e) {
    selectElement.add(newOption,selectElement.length);
    }
    }

    </script>
    , Jan 23, 2006
    #2
    1. Advertising

  3. Tony Guest

    wrote:
    > Here's a simple script to update the contents of one select based on
    > the user's choice in a second select. It works fine in IE, but not at
    > all in Firefox. Can anyone shed light on the matter? Thanks.


    You're using IE specific code that Firefox doesn't support.
    Tony, Jan 23, 2006
    #3
  4. RobG Guest

    wrote:
    > Just figured it out. IE and Firefox require different argument subsets
    > for the .add method. This code tries one add method and if there's an
    > error, tries a backup method. I found the answer on
    > http://www.webdeveloper.com/forum/archive/index.php/t-56561.html
    >
    >
    > --pbs
    >
    > <script Language="JavaScript">


    The language attribute is deprecated, type is required:

    <script type="text/javascript">


    > var i;
    > function AddItem(){
    > var oOption = document.createElement("OPTION");
    > oOption.text=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].text;
    > oOption.value=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].value;


    You can make these more efficient by getting references and reusing them:

    var sel = document.myForm.SelectInterest;
    var selOpt = sel.options[sel.selectedIndex];


    Now you can get to the text and values as selOpt.text and selOpt.value,
    and you have a reference to the select too as 'sel'.


    > addOption(document.myForm.Interests, oOption);
    > document.myForm.SelectInterest.selectedIndex=0;
    > }
    > // Add a new option to a select element
    > function addOption(selectElement,newOption) {
    > // First try the DOM2 method ...
    > try {
    > selectElement.add(newOption,null);
    > }
    > // ... And if that doesn't work use the IE-only method
    > catch (e) {
    > selectElement.add(newOption,selectElement.length);
    > }
    > }


    No need for that, try..catch is an absolute last resort. Use the DOM 0
    new Option:

    function AddItem()
    {
    var sel = document.myForm.SelectInterest;
    var selOpt = sel.options[sel.selectedIndex];
    sel.options[sel.options.length] = new Option(selOpt.text,
    selOpt.value);
    sel.selectedIndex=0;
    }


    Untested but should be OK.


    [...]



    --
    Rob
    RobG, Jan 23, 2006
    #4
    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. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,744
    Smokey Grindel
    Dec 2, 2006
  2. John Kotuby
    Replies:
    5
    Views:
    582
    John Kotuby
    Sep 25, 2008
  3. John Kotuby
    Replies:
    0
    Views:
    351
    John Kotuby
    Sep 24, 2008
  4. Man-wai Chang

    Why doesn't this page work with Firefox?

    Man-wai Chang, May 1, 2007, in forum: Javascript
    Replies:
    0
    Views:
    70
    Man-wai Chang
    May 1, 2007
  5. John Kotuby
    Replies:
    3
    Views:
    146
    John Kotuby
    May 4, 2007
Loading...

Share This Page