web-dev-qa-db-fra.com

jQuery: La meilleure pratique pour peupler le menu déroulant?

L'exemple que je vois posté tout le temps semble être sous-optimal, car il implique la concaténation de chaînes, ce qui semble ne pas être jQuery. Cela ressemble habituellement à ceci:

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

Y a-t-il un meilleur moyen?

jqueryselect
250
Jeff Putz

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

var $dropdown = $("#dropdown");
$.each(result, function() {
    $dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name));
});
415
Jeff Putz
$.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 consiste à créer un nouvel élément <option> et à l'ajouter à la liste options (en supposant que options est l'ID d'un élément déroulant.

PS Mon javascript est un peu rouillé, donc la syntaxe n'est peut-être pas parfaite

64
Andreas Grech

Bien sûr - faites options un tableau de chaînes et utilisez .join('') plutôt que += à chaque fois dans la boucle. Léger ralentissement des performances lorsqu'il y a 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 des chaînes tout le temps. Croyez-le ou non, c'est le moyen le plus rapide de créer un fragment DOM ... Maintenant, si vous n'avez que quelques options, ce n'est pas grave - utilisez la technique démontre Dreas si vous aimez le style. Mais gardez à l’esprit que vous appelez l’analyseur HTML interne du navigateur i*2 fois plutôt qu’une seule fois et modifiez le DOM à chaque fois dans la boucle ... avec un nombre suffisant d’options. vous finirez par payer pour cela, en particulier sur les navigateurs plus anciens.

Remarque: Comme le souligne le juge, ceci s'effondrera si ImageFolderID et Name ne sont pas codés correctement ... 

39
Shog9

Ou peut-être:

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

Le moyen le plus rapide est le suivant:

 $.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, car vous enroulez tout dans un seul élément lors de toute insertion dans le DOM.

15
Ricibald

J'ai trouvé que cela fonctionnait depuis le site jQuery

$.getJSON( "/Admin/GetFolderList/", function( data ) {
  var options = $("#dropdownID");
  $.each( data, function(key, val) {
    options.append(new Option(key, val));
  });
});
10
binshi

Autre approche avec ES6

fetch('https://restcountries.eu/rest/v1/all')
  .then((response) => {
    return response.json()
  })
  .then((countries) => {
    var options = document.getElementById('someSelect');
    countries.forEach((country) => {
      options.appendChild(new Option(country.name, country.name));
    });
  })
4
Israel Perales

J'ai lu que l'utilisation de fragments de document est performante, car elle évite les répétitions de page à chaque insertion d'élément DOM. Elle est également bien supportée par tous les navigateurs (même IE 6).

var fragment = document.createDocumentFragment();

$.each(result, function() {
  fragment.appendChild($("<option />").val(this.ImageFolderID).text(this.Name)[0]);
});

$("#options").append(fragment);

J'ai tout d'abord entendu parler de cela dans cours sur les meilleures pratiques JavaScript de CodeSchool .

Voici un comparaison de différentes approches }, merci à l'auteur.

3
Dapeng Li

J'utilise le plugin selectboxes jquery. Cela transforme votre exemple en:

$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false);
2
Brian Yarger
$.get(str, function(data){ 
            var sary=data.split('|');
            document.getElementById("select1").options.length = 0;
            document.getElementById("select1").options[0] = new Option('Select a State');
            for(i=0;i<sary.length-1;i++){
                document.getElementById("select1").options[i+1] = new Option(sary[i]);
                document.getElementById("select1").options[i+1].value = sary[i];
            }
            });
2
sunil
function generateYears() {
                    $.ajax({
                        type: "GET",
                        url: "getYears.do",
                        data: "",
                        dataType: "json",
                        contentType: "application/json",
                        success: function(msg) {
                            populateYearsToSelectBox(msg);
                        }
                    });
}

function populateYearsToSelectBox(msg) {
  var options = $("#selectYear");
$.each(msg.dataCollecton, function(val, text) {
   options.append(
        $('<option></option>').val(text).html(text)
    );
});
}
1
Dulith De Costa

J'utilisais jQuery et appelais une fonction pour remplir des listes déroulantes.

function loadDropDowns(name,value)
{
   var ddl = "#Categories";
   $(ddl).append('<option value="' + value + '">' + name + "</option>'");
}
0
Patrick
function LoadCategories() {
    var data = [];
    var url = '@Url.Action("GetCategories", "InternalTables")';
    $.getJSON(url, null, function (data) {
        data = $.map(data, function (item, a) {
            return "<option value=" + item.Value + ">" + item.Description + "</option>";
        });
        $("#ddlCategory").html('<option value="0">Select</option>');
        $("#ddlCategory").append(data.join(""));
    });
}
0
Deenathaiyalan Shanmugam

voici un exemple que j'ai fait sur le changement je reçois des enfants de la première sélection en deuxième sélection

jQuery(document).ready(function($) {
$('.your_select').change(function() {
    $.ajaxSetup({
        headers:{'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')}
    });

    $.ajax({
        type:'POST',
        url: 'Link',
        data:{
          'id': $(this).val()
        },
        success:function(r){
          $.each(r, function(res) {
                console.log(r[res].Nom);
                 $('.select_to_populate').append($("<option />").val(r[res].id).text(r[res].Nom));
            });
        },error:function(r) {
          alert('Error');
        }
    });
});

});enter code here

0
Abdelghafour Ennahid

J'espère que cela aide… .. J'utilise généralement des fonctions plutôt que d'écrire tout le code à chaque fois.

    $("#action_selector").change(function () {

        ajaxObj = $.ajax({
            url: 'YourURL',
            type: 'POST', // You can use GET
            data: 'parameter1=value1',
            dataType: "json",
            context: this,                
            success: function (data) {
                json: data              
            },
            error: function (request) {
                $(".return-json").html("Some error!");
            }
        });

        json_obj = $.parseJSON(ajaxObj.responseText);            

        var options = $("#selector");
        options.empty();
        options.append(new Option("-- Select --", 0));
        $.each(ajx_obj, function () {
            options.append(new Option(this.text, this.value));
        });
    });
});
0
Pablo Rocha Villagra