jQuery: les Meilleures pratiques pour remplir déroulant?

Question

L'exemple que je vois affiché tout le temps semble comme il est sous-optimale, car il s'agit de la concaténation de chaînes, qui semble donc pas jQuery. Il ressemble généralement à ceci:

$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
    	options += '<option value="' + result[i].ImageFolderID + '">' + result[i].Name + '</option>';
    }
});

Est-il un meilleur moyen?

Answer 1

Andreas Grech était assez proche... c'est en fait this (note de la référence à l' this à la place de l'élément dans la boucle):

var options = $("#options");
$.each(result, function() {
    options.append($("<option />").val(this.ImageFolderID).text(this.Name));
});

Answer 2

$.getJSON("/Admin/GetFolderList/", function(result) {
    var options = $("#options");
    //don't forget error handling!
    $.each(result, function(item) {
        options.append($("<option />").val(item.ImageFolderID).text(item.Name));
    });
});

Ce que je fais ci-dessus est la création d'un nouveau <option> de l'élément et de l'ajouter à l' options liste (en supposant options est l'ID d'une liste déroulante élément.

PS Mon javascript est un peu rouillé, donc la syntaxe ne peut pas être parfait

Answer 3

Assurez-vous - faire options un tableau de chaînes de caractères et utiliser .join('') plutôt que d' += tous les temps à travers la boucle. Des performances légèrement bosse lorsqu'ils traitent avec un grand nombre d'options...

var options = [];
$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        options.push('<option value="',
          result[i].ImageFolderID, '">',
          result[i].Name, '</option>');
    }
    $("#theSelect").html(options.join(''));
});

Oui. Je travaille toujours avec les chaînes, tout le temps. Croyez le ou non, c'est le moyen le plus rapide pour construire un DOM fragment... Maintenant, si vous avez un peu d'options, il n'a pas vraiment d'importance - utiliser la technique Dreas démontre si vous aimez le style. Mais gardez à l'esprit, vous êtes en invoquant le navigateur interne de l'analyseur HTML i*2 temps, plutôt qu'une seule fois, et à modifier le DOM chaque passage dans la boucle... avec un nombre suffisant d'options. vous finirez par payer pour cela, surtout sur les anciens navigateurs.

Remarque: Comme les points de Justice, cela va s'écrouler si ImageFolderID et Name ne sont pas codées correctement...

Answer 4

Ou peut-être:

var options = $("#options");
$.each(data, function() {
    options.append(new Option(this.value, this.text));
});

Answer 5

Le moyen le plus rapide est ceci:

 $.getJSON("/Admin/GetFolderList/", function(result) {
    	var optionsValues = '<select>';
        $.each(result, function(item) {
    		optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>';
        });
    	optionsValues += '</select>';
    	var options = $('#options');
    	options.replaceWith(optionsValues);
    });

Selon ce lien est le moyen le plus rapide parce que vous enveloppez le tout dans un seul élément lors de l'exécution de toute sorte de DOM insertion.