Dynamically generated select / options is empty in IE, but OK in other browsers

I generate a 'select' element, then populate it with options and insert them into the DOM of my page. Everything in FF, Chrome, Chromium, etc., but in IE, there are no options in the dropdown, but the highlight is showing under the cursor, and when I click on an empty list, the event handler is fired and processed correctly. Here's the relevant HTML area:

<span id="spn_fyear" style="position:absolute; top:7px; left:200px; height:24px; cursor:pointer; color:#000000;" onclick="spn_fyear_onclick(this)">
   <span id="spn_fyearno" style="position:absolute; top:0px; font:italic bold 17px sans-serif; color:#FFFEF2;"><?=$thisPage->getVar('start_year')?></span>
</span>

      

and here's the javascript in question:

function spn_fyear_onclick(_obj)
{
    //make start year list
    var lstto = document.getElementById('lst_year');
    var topts = new Array();
    var nopt = null;
    for(i=0; i<lstto.options.length; i++)
    {
        topts[i] = lstto.options[i].text;
    }
    var lstf = document.createElement('SELECT');
    lstf.id = "lst_fyear";
    lstf.style.position = "absolute";
    lstf.style.top = "-3px";
    lstf.style.left = "1px";
    lstf.style.fontFamily = "sans-serif";
    lstf.style.fontWeight = "normal";
    lstf.style.fontSize = "12px ";
    lstf.style.width = "55px";
    lstf.style.color = "#000000";
    lstf.style.display = "inline";
    lstf.onchange = lst_fyear_onchange;
    for(i = 0; i < topts.length; i++)
    {
        if(topts[i] != 'undefined')
        {
        nopt = document.createElement('OPTION');
        nopt.text = topts[i];
        nopt.value = topts[i];
        lstf.appendChild(nopt);
        }
    }
    document.getElementById('spn_fyear').appendChild(lstf);
}

      

On this line: var lstto = document.getElementById('lst_year')

I am creating a reference to an existing selection object from which I copy the options data. lst_year is populated with a php database query on the first page load. I created an array ( var topts = new Array()

) in desperation if IE has a quirk that copies attributes and properties, to no avail. As I said, everything works like a dream in FF or Chrome in both Linux and Windoze, but it gets bunched up with IE. I searched MSDN etc. For some obscure behavior, but I'm stumped. Any suggestions would be appreciated :) Regards, Jen

+3


source to share


1 answer


Most likely your problem is here:

    nopt = document.createElement('OPTION');

      

Try this method mentioned here:



JavaScript: add extra attribute after new option ()

(I had a lot of problems with elements <option>

and IE before I started using the constructor new Option

.

+2


source







All Articles