La meilleure façon de remplir sélectionner de la liste avec JQuery / Json?

Actuellement notre équipe de développement utilise ce modèle, mais je ne peux pas aider mais se demander s'il est plus rapide ou plus html-moyen efficace d'accomplir la même tâche.

HTML

<select id="myList" style="width: 400px;">
</select>
<script id="myListTemplate" type="text/x-jQuery-tmpl">
        <option value="${idField}">${name}</option>
</script>

Et c'est le Javascript:

function bindList(url) {
    callAjax(url, null, false, function (json) {
        $('#myList').children().remove();
        $('#myListTemplate').tmpl(json.d).appendTo('#myList');
    });
}
jQuery modèles sont assez rapide, surtout si vous êtes à la mise à jour de la majoration de manière asynchrone. Aussi longtemps que vous êtes seulement 1 ajouter appel et non pas de 1 pour chaque valeur de l'option, vous êtes beaux.
Ce que les chiffres de la performance parlons-nous? Combien d'options sont ajoutés?
Les listes ne sont pas énormes, peut-être de 20 à 60 options. De la 2, je crois que je suis plus préoccupé par le code de volume puis le raw de la vitesse de calcul.
Si vous voulez vérifier un plugin jQuery qui fait cela, et a quelques fonctionnalités supplémentaires, découvrez appelsiini.net/projects/chained

OriginalL'auteur Tom Halladay | 2012-04-03

  1. 9

    C'est une fonction que j'ai écrit pour le faire. Je ne suis pas sûr si c'est plus rapide que celui de jQuery Templates. Il crée et ajoute l'Option éléments un à la fois, qui peut être plus lent que les Modèles. Je soupçonne que les Modèles s'appuie l'ensemble de la chaîne HTML, puis crée les éléments DOM tous d'un seul coup. Qui peut être plus rapide. je suppose que cette fonction pourrait être ajusté à faire la même chose. J'ai travaillé avec des Modèles, et je trouve que cette fonction est plus facile de consommer quelque chose de simple que le remplissage d'une liste de sélection, et il s'intègre parfaitement dans mon utility.js fichier.

    Mise à jour: j'ai mis à jour ma fonction pour générer le HTML, et d'appeler append() qu'une seule fois. Il va effectivement beaucoup plus rapide maintenant. Merci de poster cette question, c'est agréable d'être en mesure d'optimiser son propre code.

    La consommation de la fonction

     //you can easily pass in response.d from an AJAX call if it's JSON formatted
 var users = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Cindy'} ]
 setSelectOptions($('#selectList'), users, 'id', 'name');

    Le code de la fonction

    //Fill a select list with options using an array of values as the data source
//@param {String, Object} selectElement Reference to the select list to be modified, either the selector string, or the jQuery object itself
//@param {Object} values An array of option values to use to fill the select list. May be an array of strings, or an array of hashes (associative arrays).
//@param {String} [valueKey] If values is an array of hashes, this is the hashkey to the value parameter for the option element
//@param {String} [textKey] If values is an array of hashes, this is the hashkey to the text parameter for the option element
//@param {String} [defaultValue] The default value to select in the select list
//@remark This function will remove any existing items in the select list
//@remark If the values attribute is an array, then the options will use the array values for both the text and value.
//@return {Boolean} false
function setSelectOptions(selectElement, values, valueKey, textKey, defaultValue) {
if (typeof (selectElement) == "string") {
selectElement = $(selectElement);
}
selectElement.empty();
if (typeof (values) == 'object') {
if (values.length) {
var type = typeof (values[0]);
var html = "";
if (type == 'object') {
//values is array of hashes
var optionElement = null;
$.each(values, function () {
html += '<option value="' + this[valueKey] + '">' + this[textKey] + '</option>';                    
});
} else {
//array of strings
$.each(values, function () {
var value = this.toString();
html += '<option value="' + value + '">' + value + '</option>';                    
});
}
selectElement.append(html);
}
//select the defaultValue is one was passed in
if (typeof defaultValue != 'undefined') {
selectElement.children('option[value="' + defaultValue + '"]').attr('selected', 'selected');
}
}
return false;
}

    OriginalL'auteur Walter Stabosz