javascript - 動的に生成された選択/オプションはIEでは空ですが、他のブラウザーではOKです

Question

「select」要素を生成し、オプションを入力してページの DOM に挿入しています。FF、Chrome、Chromiumなどではすべて問題ありませんが、IEではドロップダウンリストにオプションは表示されませんが、カーソルの下にハイライトが表示され、空のリストをクリックするとイベントハンドラーがトリガーされ、正しく処理されます。関連する HTML 領域は次のとおりです。

<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>

問題のJavaScriptは次のとおりです。

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);
}

この行では:var lstto = document.getElementById('lst_year') オプション データをコピーする既存の選択オブジェクトへの参照を作成しています。lst_year は、ページが最初に読み込まれたときに、php データベース クエリによって設定されます。var topts = new Array()IEに属性とプロパティをコピーする癖があるが役に立たない場合に備えて、必死になって配列（ ）を作成しました。私が言ったように、すべてがLinuxとWindozeの両方でFFまたはChromeで夢のように機能しますが、IEでは山積みになります。あいまいな動作についてMSDNなどを精査しましたが、困惑しています。どんな提案でも大歓迎です:) よろしく、ジェン