Firefox and select lists

Discussion in 'Javascript' started by beenamore, Feb 6, 2006.

  1. beenamore

    beenamore Guest

    Hi,

    I have two select lists and depending on the value selected in the
    first select dropdown, I want to populate the second list.

    I tired a couple of different ways, but for some reason, it works fine
    on IE but not on Firefox. On Firefox the second dropdown list doesnt
    get populated.

    Any pointers on how to populate the second dropdown..

    Heres the code:-

    for(var j=0;j<array.length;j++)
    {
    this.document.getElementById("secondSelectName").options[j] = new
    Option("txt", "val");
    }

    for(var j=0;j<array.length;j++)
    {
    var oOption = document.createElement("OPTION");
    secondSelectlist.options.add(oOption);
    oOption.innerText = "txt";
    oOption.value = "value";
    }

    for(var j=0;j<array.length;j++)
    {
    this.document.getElementById("secondSelectName").add(new Option("txt",
    "val"));
    }

    Thanks for the inputs,
    Beena
     
    beenamore, Feb 6, 2006
    #1
    1. Advertisements

  2. beenamore

    Randy Webb Guest

    said the following on 2/6/2006 1:32 PM:
    Ummm, ok.
    Really? Considering you have some really, ummm, weird code that doesn't
    surprise me.
    And where is that code at? And where is the HTML that goes with it?
    Using gEBI to access form elements? First guess, your form elements have
    NAME attributes and not ID attributes.
    ..innerText is IE only.
    Post a URL to a sample page that has your *complete* code in it. The
    above is next to useless to try to figure out why it doesn't "work".
     
    Randy Webb, Feb 6, 2006
    #2
    1. Advertisements

  3. HTML select have an add method but not options.

    http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14493106

    Also, the W3C DOM 2 HTML add method takes 2 parameters, not 1.

    MSIE 6 does not support
    objSelect.add(objOption, null)

    Proven workaround:
    objSelect.appendChild(objOption);

    oOption.appendChild(document.createTextNode("txt"));

    As mentioned by Randy, innerText is a proprietary property.
    I'm not sure you can do the above statement. Can you post an url?

    Gérard
     
    Gérard Talbot, Feb 7, 2006
    #3
  4. beenamore

    RobG Guest

    IE has trouble adding otpions using createElement. The best way (i.e.
    supported in most browsers) to add options to a select element is with
    new Option (wrapped for posting):

    selRef(selRef.options.length) =
    new Option([text, [value, [defaultSelected, [selected]]]])


    Where all parameters are optional and:

    text is the option text
    value is the default value
    selected is a boolean (true/false) to make the option selected
    defaultSelectedis a boolean to make the option the default selected

    new Option() is DOM 0, so widely supported and likely never to be dropped.

    e.g.


    <script type="text/javascript">
    function addOptions(sel)
    {
    // Remove existing options
    sel.options.length = 0;

    // Add 5 options, make opt index 2 default selected and 4 selected
    for (var i=0; i<5; ++i){
    sel[sel.options.length] =
    new Option('Option ' + i, 'opt' + i, (i==2), (i==4) );
    }
    }
    </script>

    <form action="">
    <select name="selA">
    <option selected></option>
    </select>
    <input type="button" value="Add options"
    onclick="addOptions(this.form.selA);">
    <input type="reset">
    </form>
     
    RobG, Feb 7, 2006
    #4
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.