243 votes

jQuery: les Meilleures pratiques pour remplir déroulant?

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?

397voto

Jeff Putz Points 3654

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

63voto

Andreas Grech Points 39188
$.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

37voto

Shog9 Points 82052

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...

21voto

xinthink Points 173

Ou peut-être:

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

15voto

Ricibald Points 1976

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: