动态生成的选择/选项在IE中为空，但在其他浏览器中为OK [英] dynamically generated select / options empty in IE but OK in other browsers

问题描述

我正在生成一个select元素，然后使用选项填充它并将其插入到我的页面的DOM中。一切都在FF，Chrome，Chromium等等，但在IE中没有选项显示在下拉列表中，但突出显示在光标下，当我单击空白列表中，事件处理程序被触发并正确处理。
这里是相关的HTML区域：

 < span id =spn_fyearstyle =position：absolute; top ：7px; left：200px; height：24px; cursor：pointer; color：＃000000;的onclick = spn_fyear_onclick（这） > 
< span id =spn_fyearnostyle =position：absolute; top：0px; font：italic bold 17px sans-serif; color：＃FFFEF2;><？= $ thisPage-> getVar （ 'START_YEAR'）>？< /跨度> 
< / span> 
  

这里是有问题的javascript：

 函数spn_fyear_onclick（_obj）
 {
 // make start year list 
 var lstto = document.getElementById（'lst_year'）; 
 var topts = new Array（）; 
 var nopt = null; （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; 
（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等一些模糊的行为，但我被困了。任何建议将非常感谢:)
亲切的问候，
Jen

解决方案

很可能，你的问题在这里：

  nopt = document.createElement（'OPTION'）; 
  

尝试此处提到的方法：

JavaScript：在新的Option（）之后添加额外的属性

（我已经在< option> 元素和IE之前遇到了很多问题，直到我开始使用 new Option constructor。

I'm generating a 'select' element then populating it with options and inserting it into the DOM of my page. Everything's fine in FF, Chrome, Chromium etc. but in IE no options show in the drop-down list but highlights show under the cursor and when I click in the blank list the event handler gets triggered and processes 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);
}

In this line: var lstto = document.getElementById('lst_year') I'm creating a reference to an existing select object from which I copy the option data. lst_year gets populated by a php database query when the page first loads. I created the array (var topts = new Array()) in desperation in case IE has a quirk which copies attributes and properties but to no avail. Like I said - everything works like a dream in FF or Chrome both in Linux and Windoze but falls in a heap with IE. I've scoured MSDN etc. for some obscure behaviour but I'm stumped. Any suggestions would be greatly appreciated :) Kind regards, Jen

解决方案

Most likely, your problem is here:

    nopt = document.createElement('OPTION');

Try this method mentioned here:

JavaScript: add extra attribute after new Option()

(I've had a lot of problem with <option> elements and IE before until I started using the new Option constructor.

这篇关于动态生成的选择/选项在IE中为空，但在其他浏览器中为OK的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！