jQuery: meilleure pratique pour peupler drop down?

$.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, c'est créer un nouvel élément <option> et l'ajouter à la liste options (en supposant que options est L'ID d'un élément descendant.

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

Assurez-vous - faire options un tableau de chaînes de caractères et utiliser .join('') plutôt que += à chaque passage dans la boucle. Légère bosse de performance lors de l'utilisation d'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 avec des ficelles tout le temps. Croyez-le ou non, c'est la façon la plus rapide de construire un fragment de DOM... Maintenant, si vous n'avez que quelques options, cela n'aura pas vraiment d'importance - utilisez la technique dreas demonstrates si vous aimez le style. Mais gardez à l'esprit, vous invoquez L'analyseur HTML interne du navigateur i*2 fois, plutôt qu'une seule fois, et de modifier le DOM à chaque fois à travers la boucle... avec un nombre suffisant d'options. vous finirez par payer pour cela, surtout sur les anciens navigateurs.

Note: comme le souligne Justice, cela tombera en morceaux si ImageFolderID et Name ne sont pas codé correctement ...

ou peut-être:

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

la voie la plus rapide est celle-ci:

 $.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 envelopper tout dans un seul élément lors de faire toute sorte d'insertion DOM.

j'ai trouvé que cela fonctionne à partir du site de jquery

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

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

j'utilise le selectbox jQuery plugin. Il transforme votre exemple en:

$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false);

$.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];
            }
            });

j'ai lu que l'utilisation de document fragments est performant parce qu'il évite le retour de page sur chaque insertion D'élément DOM, il est également bien pris en charge 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 lu à ce sujet pour la première fois dans le cours Codeschool's JavaScript Best Practices .

Voici une comparaison de différentes approches , grâce à auteur.

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

j'espère que ça aidera. J'utilise habituellement des fonctions à la place 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));
        });
    });
});

j'ai utilisé jQuery et j'ai appelé une fonction pour remplir les gouttières.

function loadDropDowns(name,value)
{
   var ddl = "#Categories";
   $(ddl).append('<option value="' + value + '">' + name + "</option>'");
}

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

voici un exemple que j'ai fait sur le changement j'obtiens les enfants du premier sélectionner dans le deuxième sélectionner

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