大多數*有效*方式填充選擇與jquery ajax

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的發現在每個追加元素（因爲你現在做）的

---

更新全碼

更換內部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_text<TAB>option_value:option_text<TAB>option_value:option_text...的格式，那麼你可以做一個正則表達式替換，只是把它在選擇元素。

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's jQuery Templates。其語法很簡單：

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