使用 Jquery ajax 填充 select 的最*有效*方法

Question

我有几个使用 JQuery Ajax 填充的选择。大多数负载良好。然而，其中一两个查询在极少数情况下会返回大量记录到选择。我想知道我填充选择的方式是否是从客户端代码执行此操作的最有效方法。

我省略了一些东西以使代码更短一些。

$(function () {
    FillAwcDll()
});
function FillAwcDll() {
FillSelect('poleDdl', 'WebService.asmx/Pole', params, false, null, false);
}

function ServiceCall(method, parameters, onSucess, onFailure) {
    var parms = "{" + (($.isArray(parameters)) ? parameters.join(',') : parameters) + "}"; // to json
    var timer = setTimeout(tooLong, 100000);
    $.ajax({
        type: "POST",
        url: appRoot + "/services/" + method,
        data: parms,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            clearTimeout(timer);
            alert("success");
            if (typeof onSucess == 'function' || typeof onSucess == 'object')
                onSucess(msg.d);
        },
        error: function (msg, err) {

            }
        }
    });

function FillSelect(sel, service, param, hasValue, prompt, propCase) {
    var selectId = 'select#{0}'.format(sel);
    if ($(selectId) == null) {
        alert('Invalid FillSelect ID');
        return;
    }
    $(selectId + ' option').remove();
    $('<option class=\'loading\' value=\'\'>loading...</option>').appendTo(selectId);
    ServiceCall(service,
                param,
                function (data, args) {
                    $(selectId + ' option').remove();

                    if (prompt != null && prompt.length > 0) {
                        $('<option class=\'selectPrompt\' value=\'\' selected>{0}</option>'.format(prompt)).appendTo(selectId);
                    }
                    $.each(data, (hasValue)
                        ? function (i, v) {
                            $('<option value=\'{0}\'>{1}</option>'.format(v.Key, (propCase) ? v.Value.toProperCase() : v.Value)).appendTo(selectId);
                        }
                        : function (i, v) {
                            $('<option value=\'{0}\'>{1}</option>'.format(v, (propCase) ? v.toProperCase() : v)).appendTo(selectId);
                        })

                },
                FailedServiceCall);
                }

String.prototype.format = function () {
    var pattern = /\{\d+\}/g;
    var args = arguments;
    return this.replace(pattern, function (capture) { return args[capture.match(/\d+/)]; });
}

所以这只是循环并填充选择。有更好的方法吗？请注意，警报（“成功”）行几乎立即触发，因此数据很快就会返回，但之后它会挂起并尝试填充选择。

更新：（3）这工作得很好。虽然有一些问题。我有 onBlur（调用函数来重新加载选择），当 onBlur 被激活并且选择重新加载时，页面只需要永远加载，这么长时间我必须停止它......不知道为什么？

    ServiceCall(service,
            param,
            function (data, args) {
                var $select = $(selectId);
                var vSelect = '';
                if (prompt != null && prompt.length > 0) {
                    vSelect += '<option class=\'selectPrompt\' value=\'\' selected>{0}</option>'.format(prompt);
                }
                if (hasValue) {
                    $.each(data, function (i, v) {
                        vSelect += '<option value=\'{0}\'>{1}</option>'.format(v.Key, (propCase) ? v.Value.toProperCase() : v.Value);
                    });
                }
                else {
                    $.each(data, function (i, v) {
                        vSelect += '<option value=\'{0}\'>{1}</option>'.format(v, (propCase) ? v.toProperCase() : v);
                    });
                }
                $select.html(vSelect);
                delete vSelect;
                delete data;
            },
            FailedServiceCall);
} 

Answer 1

您是否尝试过在内存中创建一个 jquery 对象并填充该对象，最后将其放入 DOM 中？

像这样

var vSelect = $('<select/>'); // our virtual select element

，在 each 方法中使用它来附加 options

vSelect.append('<option>..</option>');

，最后在 DOM 中附加虚拟对象的 html ，

$(selectId).html( vSelect.html() );

---

其他可以加快当前代码速度的东西是保留对 select 元素（而不是其 id）的引用并直接附加到它，而不是让 jquery 在每个附加中查找元素（像现在一样< /em>)

---

使用完整代码更新

请将 FilLSelect 中的部分替换

ServiceCall(service,
            param,
            <SNIP>...<SNIP>,
            FailedServiceCall);
            }

为

ServiceCall(service,
            param,
            function (data, args) {
                var $select = $(selectId);
                var vSelect = '';
                if (prompt != null && prompt.length > 0) {
                     vSelect += '<option class=\'selectPrompt\' value=\'\' selected>{0}</option>'.format(prompt);
                }
                if (hasValue)
                {
                   $.each(data, function (i, v) {
                        vSelect += '<option value=\'{0}\'>{1}</option>'.format(v.Key, (propCase) ? v.Value.toProperCase() : v.Value);
                    });
                }
                else
                {
                   $.each(data,function (i, v) {
                        vSelect += '<option value=\'{0}\'>{1}</option>'.format(v, (propCase) ? v.toProperCase() : v);
                    });
                }
                 $select.html( vSelect );

            },
            FailedServiceCall);
            }

如果页面可以将整个数据以字符串形式返回，格式为

option_value:option_textoption_value:option_text<, TAB>option_value:option_text... 然后您可以使用正则表达式进行替换，然后将其放入 select 元素中。

var options = data.replace( /([\S ]+)(?=:)(:)([\S ]+)/gi, '<option value="$1">$3</option>');
$(selectID).empty().append(options);

Answer 2

这是一个通用的，其中 msg 是从服务器返回的 JSON 数据对象。

var options = "";

$(msg).each(function() {
   options += $('<option />').val(yourValue).text(yourDisplayValue);
});


$(selectID).empty().append(options);

就我个人而言，我更喜欢使用模板系统从 javascript 插入 html。我使用 Microsoft 的 jQuery 模板。其语法很简单：

var options = $.tmpl("<option value="${yourValue}">${yourDisplayValue}</option>", msg);

$(selectID).empty().append(options);

选择权在你手中。 :)

Answer 3

创建一个不附加到 dom 的临时容器。
用选项填充容器后，将所有子项附加到选择。

var temp = $('<select></select>');
$('<option></option>').attr('value', 1).text('First').appendTo(temp);
$(selectId).children().remove();
temp.children().detach().appendTo($(selectId));

也许这也会起作用：

$(selectId).html(temp.html());