使用Javascript填充<select>的更快方法

Question

我在表单上有两个<select>框.选择第一个<select>框中的项目将决定第二个<select>中应显示的内容(使用Ajax http_request).

在某些情况下,第二个选择中可能有500个(猜测)项目,在IE中更新需要5-10秒.Firefox似乎完美无缺.

我想知道是否有更快的方法来实现这一目标.当前服务器创建一个字符串将其传递给客户端,然后将其分解并通过创建选项元素将每个项目添加到选择,然后将其添加到<select>.

我确实尝试在服务器上创建整个选择项作为字符串并将其添加到表单但由于某种原因它在Firefox中不起作用(错过了什么？)

谢谢

Answer 1

即使对于IE,500个元素也不是很多.你必须做其他事情才能造成滞后.

我只是在IE6,IE7,FF2和FF3中尝试了500多个选项,并且几乎都是即时的.我用过这段代码:

var data = [
    { text: 'foo', value: 'bar' },
    // ...
    { text: 'foo', value: 'bar' }
];

var select = document.getElementsByTagName('select')[0];
select.options.length = 0; // clear out existing items
for(var i=0; i < data.length; i++) {
    var d = data[i];
    select.options.add(new Option(d.text, i))
}

我建议分析一下获取数据并填充下拉列表的代码.还有其他东西可能占用时间.例如,检查"分解"从服务器返回的字符串值的代码是否清晰(听起来就像你在那里进行自己的自定义解析).

Answer 2

使用SelectElement.innerHTML设置它是最快的...但在 IE 中失败。

上次我检查过，如果您将所有选项包装在虚假的<div>标记中，或者在 IE 中设置选择列表的整个 .outerHTML，则可以在 IE 中执行此操作。