0

我正在从 getJson 调用创建一个选择列表。

在 firefox / chrome 中，选择列表的生成速度非常快，但在 ie（在 ie8 中测试）中，创建选项需要几秒钟。

选择列表中添加了大约 2000 个选项

我的代码如下

function getPractitioners(practID, selectID) {
    selectID = '#' + selectID;
    $.getJSON("/practitioner/getPractitioners", { practID: practID }, function (fooList) {
        $(selectID).empty();
        $.each(fooList, function (i, foo) {
            if (foo.profID == practID) {
                $(selectID).append(('<option value=\'' + foo.profID + '\' selected=\'selected\'>' + foo.display + '</option>'));
                }
            else
            {
                $(selectID).append(('<option value=\'' + foo.profID + '\' >' + foo.display + '</option>'));
            }
        });
        $(selectID).trigger("liszt:updated");
    });
}

任何人都可以提出任何建议来改善这一点吗？

以前我添加了类似的选项

$(selectID).append(("<option></option>").attr("value", foo.profID).attr("selected", "selected").text(foo.display));

但改变这一点并没有提高性能。

先感谢您。

4

3 回答 3

2

使用字符串并在循环末尾追加一次以减少您正在执行的 dom 操作量。

var options = '';
$.each(fooList, function (i, foo) {
    options += '<option value=\'' + foo.profID + '\' >' + foo.display + '</option>';        
});
$(selectID).html(options).val(practID).trigger("liszt:updated");
于 2013-05-20T15:50:48.690 回答
0

这个插件https://github.com/harvesthq/chosen/pull/1339解决了我在使用所选插件时遇到的确切问题。

于 2013-10-03T12:30:33.750 回答
0

我有同样的问题。我通过在附加所有选项后操作选定的属性来提高性能。

//slow --- append selected value in each apppend.
$.each(fooList, function (i, foo) {
    $(selectID).append(('<option value="XXX" selected>yyyy</option>'));
});

//fast --- manipulating selected attribute after append to DOM
$.each(fooList, function (i, foo) {
    $(selectID).append(('<option value="XXX">yyyy</option>'));
});
$(selectID).find("option").attr("selected", "selected");

但我不知道为什么这种解决方法效果很好。

于 2013-11-02T02:06:59.377 回答