您是否尝试过在内存中创建一个jQuery对象并填充的，并在年底把它在DOM？

像这样

  VAR vSelect = $（'＆LT;选择/＆GT;'）; //我们的虚拟选择元素
 

和每个的方法使用该追加选项

  vSelect.append（'＆LT;选项＆GT; ..＆LT; /选项＆GT;'）;
 

，并在年底追加的DOM虚拟对象的HTML

  $（SELECTID）。html的（vSelect.html（））;
 

---

别的东西，会加速你的当前code是保持一个引用选择元素（而不是它的id的 的）和追加到它，而不是直接具有的jQuery查找每个追加元素（，你现在要做的的）

---

更新以饱满的code

替换里面FilLSelect部分

  ServiceCall（服务，
            参数，
            ＆LT; SNIP＆GT; ...＆LT; SNIP＆gt;中
            FailedServiceCall）;
            }
 

与

  ServiceCall（服务，
            参数，
            功能（数据，参数）{
                变量$选择= $（SELECTID）;
                VAR vSelect ='';
                如果（提示=空＆安培;！＆安培; prompt.length大于0）{
                     vSelect + ='＆LT;选项类= \'selectPrompt \价值= \'\'选择＆GT; {0}＆LT; /选项＆GT;'格式（提示）;
                }
                如果（hasVa​​lue的）
                {
                   $每个（数据，功能（I，V）{
                        vSelect + ='＆LT;期权价值= \'{0} \＆GT; {1}＆LT; /选项＆GT;格式（v.Key，（propCase）v.Value.toProperCase（）：v.Value）。 ;
                    }）;
                }
                其他
                {
                   $每个（数据，功能（I，V）{
                        。vSelect + ='＆LT;期权价值= \'{0} \＆GT; {1}＆LT; /选项＆GT;格式（V，（propCase）v.toProperCase（）：V）;
                    }）;
                }
                 $ select.html（vSelect）;

            }，
            FailedServiceCall）;
            }
 

如果您页可以带回整个数据作为字符串中的格式

option_value:option_text<TAB>option_value:option_text<TAB>option_value:option_text...$c$c>那么你可以做一个替换常规EX pression，只是把它在选择元素。

  VAR选项= data.replace（/（[\ S] +）（=：）（：？）（[\ S] +）/ GI，'＆LT;期权价值=$ 1＆GT; $第3版; /选项＆GT;'）;
$（SELECTID）.empty（）追加（选项）。
 

I have several selects that I populate using JQuery Ajax. Most load fine. There are one or two of these queries however, that in a few rare cases return a LOT of records to the select. I was wondering if the way that I am populating the selects is the most efficient way to do so from client side code.

I omitted some stuff to make the code a litle shorter.

$(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+/)]; });
}

So this just loops around and fills the selects. Is there a better way to do this? Note the alert("success") line fire almost immediately, so the data is coming back fast, but then after that it hangs trying to fill the select.

UPDATE: (3) this is working really well. Although there is some issue. I have onBlur(call function to reload selects) and when the onBlur is activated and the selects re-load, the page just takes FOREVER to load, so long I has to stop it... not sure why?

    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);
} 

Have you tried creating a jquery object in memory and populating that, and at the end putting it in the DOM?

like this

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

and in the each method use that to append the options

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

and at the end append in the DOM the virtual object's html

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

---

something else that would speed your current code is to keep a reference to the select element (instead of its id) and append to it directly instead of having jquery find the element in each appending (as you do now)

---

Update with full code

replace the part inside FilLSelect

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

with

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);
            }

if you page can bring back the whole data as a string in the format of

option_value:option_text<TAB>option_value:option_text<TAB>option_value:option_text... then you could do a replace with a regular expression and just put it in the select element.

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