most * efficient * manera de poblar seleccionar con Jquery ajax

Question

Tengo varias selecciones que llene con JQuery Ajax. La mayoría carga bien Sin embargo, hay una o dos de estas consultas que, en unos pocos casos excepcionales, devuelven MUCHOS registros a la selección. Me preguntaba si la forma en que estoy completando los seleccionados es la forma más eficiente de hacerlo desde el código del lado del cliente.

He omitido algunas cosas para hacer que el código sea un poco más corto.

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

Así que esto simplemente gira y llena las selecciones. ¿Hay una mejor manera de hacer esto? Tenga en cuenta que la línea de alerta ("éxito") se dispara casi de inmediato, por lo que los datos vuelven rápidamente, pero luego se bloquea al intentar completar la selección.

ACTUALIZACIÓN: (3) esto está funcionando realmente bien. Aunque hay algún problema. Tengo onBlur (función de llamada para volver a cargar selecciones) y cuando el onBlur está activado y las selecciones se vuelven a cargar, la página solo necesita FOREVER para cargar, por lo que tengo que detenerlo ... ¿no estoy seguro de por qué?

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

¿Has intentado crear un objeto jquery en memoria y poblar eso, y al final ponerlo en el DOM?

como este

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

y en el uso each método que para anexar los options

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

y al final anexar en el DOM html del objeto virtual

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

---

algo más que acelerar su código actual es mantener una referencia al elemento select (en lugar de su ID) y anexar a ella directamente en lugar de tener jQuery encontrar el elemento en cada anexar (como lo hace ahora)

---

de actualización con código completo

reemplazar la parte interior FilLSelect

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

con

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

si la página puede traer de vuelta los datos enteros como una cadena en el formato de

option_value:option_text<TAB>option_value:option_text<TAB>option_value:option_text... entonces usted podría hacer un reemplazo con una expresión regular y sólo hay que poner en el elemento select.

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

Answer 2

Aquí está uno genérico donde msg es el objeto de datos JSON devuelto por el servidor.

var options = ""; 

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


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

Personalmente, prefiero usar un sistema de plantillas para insertar html desde javascript. Yo uso Microsoft's jQuery Templates. La sintaxis para eso sería simple:

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

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

La elección es suya. :)

Answer 3

Crear un contenedor temporal que no esté unido al dom. Después de llenar el contenedor con las opciones, conecte todos los elementos secundarios a la selección.

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

Tal vez esto también funcionará:

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