Fatal编程技术网
  • javascript/
  • 更快的填充方式<；选择>；使用Javascript

更快的填充方式<；选择>；使用Javascript

javascript ajax internet-explorer performance

更快的填充方式<；选择>；使用Javascript,javascript,ajax,internet-explorer,performance,html-select,Javascript,Ajax,Internet Explorer,Performance,Html Select,我在一张表格上有两个盒子。在第一个框中选择一个项目将决定第二个框中应该显示什么（使用Ajax http_请求） 在某些情况下，在第二次选择中可能有500个（猜测）项目，在IE中更新需要5-10秒。Firefox似乎工作得很好 我想知道是否有更快的方法来实现这一点。当前，服务器创建一个字符串并将其传递给客户机，然后将其分解并通过创建option元素将每个项目添加到select，然后将其添加到 我曾尝试在服务器上创建整个select项作为字符串，并将其添加到表单中，但由于某种原因，它在Firefox

我在一张表格上有两个盒子。在第一个框中选择一个项目将决定第二个框中应该显示什么（使用Ajax http_请求）

在某些情况下，在第二次选择中可能有500个（猜测）项目，在IE中更新需要5-10秒。Firefox似乎工作得很好

我想知道是否有更快的方法来实现这一点。当前，服务器创建一个字符串并将其传递给客户机，然后将其分解并通过创建option元素将每个项目添加到select，然后将其添加到

我曾尝试在服务器上创建整个select项作为字符串，并将其添加到表单中，但由于某种原因，它在Firefox中无法工作（遗漏了什么？）

感谢您使用SelectElement设置它。innerHTML将是最快的。。。但是

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

查看您的代码将非常有帮助

如果你正在创建一个<代码> <代码>元素，并在每次迭代中添加它，你应该同时考虑创建所有的<代码> <代码>元素，然后同时将它们全部添加。 So（以伪代码表示）：

我将在服务器上创建整个选择，并将其注入页面。这种方法绕过了恼人的浏览器差异，降低了客户端代码的复杂性

你提到你尝试过，但在firefox中失败了。我建议你坚持让它发挥作用，发布另一个问题寻求帮助，或者编辑你的问题，向我们展示你在firefox中做了哪些不起作用的东西。

500元素不是很多，即使对于IE来说也是如此。你一定是在做其他事情导致延迟

我刚刚尝试了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))
}

var数据=[
{文本：'foo'，值：'bar'}，
// ...
{文本：'foo'，值：'bar'}
];
var select=document.getElementsByTagName（'select'）[0]；
select.options.length=0；//清除现有项目
对于（变量i=0；i
我建议分析获取数据和填充下拉列表的代码位。其他事情可能会占用时间。例如，检查“分解”服务器返回的字符串值的代码是否清晰（听起来像是在进行自定义解析）。

当我使用第一个版本时，它可以工作，但在更新第二个选择时可能非常慢

<html> <form id='myform' method='post' action='$_SERVER[PHP_SELF]'> <table> <tr><td><select onselect='CALL_AJAX_AND_UPDATE();'></select></td></tr> <tr><td><select id='selectid'></select></td></tr> </table> </form> </html> <script type=\"text/javascript\"> function UPDATE( updatedata ) { var itemid = document.getElementById('selectid'); var data = updatedata.split( '|' ); var len = data.length; for( i=0; i < len; i ++ ) { var opt = document.createElement('option'); opt.text = data[i]; try { itemid.add( opt, null ); } catch(ex) { itemid.add( opt ); } } } </script> 函数更新（updatedata） { var itemid=document.getElementById（'selectid'）； var data=updatedata.split（“|”）； var len=data.length； 对于（i=0；i <html> <form id='myform' method='post' action='$_SERVER[PHP_SELF]'> <table> <tr><td><select onselect='CALL_AJAX_AND_UPDATE();'></select></td></tr> <tr><td><div id='addselect'></div></td></tr> </table> </form> </html> <script type=\"text/javascript\"> function UPDATE( updatedata ) { // update data is full select html var itemid = document.getElementById('addselect'); itemid.innerHTML = updatedata; } </script> 函数更新（updatedata） { //更新数据已满，请选择html var itemid=document.getElementById（'addselect'）； itemid.innerHTML=updatedata； }
SelectElement.innerHTML的所有这些答案的问题在于，您无法使用SELECTs执行此操作。解决方案是在SELECT元素本身的父元素上使用innerHTML。因此，在ajax/jquery/whatever代码中，创建一个包含所有选定HTML的字符串，然后获取holder（div或span或其他内容），并将innerHTML设置为您构建的字符串

您需要将SELECT与页面隔离，并为其指定一个显式父元素（span或div），以防止在销毁/重建SELECT元素时损坏其他html元素

简短答复:

parentselectelement.removeChild(selectelement);
parentselectelement.innerHTML = "<select ...><options...></select>";

parentselectelement.removeChild（selectelement）；
parentselectelement.innerHTML=“”；
在将其附加到SELECT之前，不要忘记先附加到
document.createDocumentFragment（）
。

第一个代码很好，但这对我来说更好：

var data = [
    { text: 'uno', value: '1' },
    {text: 'dos', value: '2' }
];

var select = document.getElementById('select-choice-1');
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, d.value))
}

var数据=[
{文本：'uno'，值：'1'}，
{文本：'dos'，值：'2'}
];
var select=document.getElementById（'select-choice-1'）；
select.options.length=0；//清除现有项目
对于（变量i=0；i
我喜欢Fresh Crescent和Kemal Fadillah的答案，因为两者都使用：

select.options.add(new Options(name, value))
对于数据对象，我建议进行如下小调整：

var data = {
  'uno': 1,
  'dos': 2
};

var select = document.getElementById('select-choice-1');
select.options.length = 0; // clear out existing items
for (var i in data) {
      select.options.add(new Option(i, data[i]));
}
如果您不介意使用CoffeeScript，那么下面的代码将在几行中用JSON数据填充select列表

HTML

<select id="clients"></select>
使用数组有什么帮助？您仍然需要向选择列表调用{n}appends（这是导致速度问题的原因，因为浏览器需要在每次追加后确定是否需要更新列表的大小）@scunliffe-浏览器优化很少归结为大O复杂性分析。我的猜测是，如果新选项元素同时连接到DOM，IE可能会延迟将它们呈现到屏幕上，这应该会加快速度。只是想尝试一下。嗯……不应该是
select.options.add（新选项（d.text，d.value））
？ 
<select id="clients"></select>

fillList=($list, url)=>
    $.getJSON(url)
    .success((data)->
        $list
        .empty()
        .append("<option value=\"#{item.Id}\">#{item.Name}</option>" for item in data)
    )

$ -> 
    fillList($('#clients'), '/clients/all')

[
  {"Id":"1","Name":"Client-1"},
  {"Id":"2","Name":"Client-2"}
]