jQuery: Best Practice zum Auffüllen von Dropdowns?

Das Beispiel, das ich ständig gepostet sehe, scheint nicht optimal zu sein, da es das Verketten von Zeichenfolgen beinhaltet, was also nicht jQuery zu sein scheint. Es sieht normalerweise so aus:

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

Gibt es einen besseren Weg?

Andreas Grech war ziemlich nah dran ... es ist tatsächlich so this(beachten Sie den Verweis auf thisanstelle des Elements in der Schleife):

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

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

Was ich oben mache, ist ein neues <option>Element zu erstellen und es der optionsListe hinzuzufügen (vorausgesetzt, es optionsist die ID eines Dropdown-Elements.

PS Mein Javascript ist etwas verrostet, daher ist die Syntax möglicherweise nicht perfekt

Sicher - machen Sie optionseine Reihe von Zeichenfolgen und verwenden Sie .join('')sie nicht +=jedes Mal durch die Schleife. Leichte Leistungseinbußen beim Umgang mit einer Vielzahl von Optionen ...

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

Ja. Ich arbeite immer noch die ganze Zeit mit Streichern. Ob Sie es glauben oder nicht, das ist der schnellste Weg, um ein DOM-Fragment zu erstellen ... Wenn Sie nur wenige Optionen haben, spielt es keine Rolle - verwenden Sie die Technik, die Dreas demonstriert, wenn Sie den Stil mögen. Beachten Sie jedoch, dass Sie die internen HTML-Parserzeiten des Browsers i*2nicht nur einmal aufrufen und das DOM jedes Mal durch die Schleife ändern ... mit einer ausreichenden Anzahl von Optionen. Sie werden am Ende dafür bezahlen, besonders bei älteren Browsern.

Hinweis: Wie Richter weist darauf hin, diese auseinander fallen , wenn ImageFolderIDund Namesind nicht richtig codiert ...

Oder vielleicht:

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

Der schnellste Weg ist folgender:

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

Laut diesem Link ist dies der schnellste Weg, da Sie bei jeder Art von DOM-Einfügung alles in ein einziges Element einschließen.

Ich fand, dass dies von jquery site funktioniert

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

Ich habe gelesen, dass die Verwendung von Dokumentfragmenten performant ist, da sie den Seitenrückfluss bei jedem Einfügen eines DOM-Elements vermeidet und auch von allen Browsern (sogar IE 6) gut unterstützt wird.

var fragment = document.createDocumentFragment();

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

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

Ich habe dies zum ersten Mal im JavaScript Best Practices-Kurs von CodeSchool gelesen .

Hier ist ein Vergleich verschiedener Ansätze , danke an den Autor.

Anderer Ansatz mit 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));
    });
  })

Ich benutze das Selectboxes JQuery Plugin. Es macht Ihr Beispiel zu:

$('#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];
            }
            });

Ich hoffe, es hilft. Normalerweise benutze ich Funktionen, anstatt jedes Mal den gesamten Code zu schreiben.

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

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

Hier ist ein Beispiel, das ich bei einer Änderung gemacht habe. Ich bekomme Kinder der ersten Auswahl in der zweiten Auswahl

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

Ich habe jQuery verwendet und eine Funktion aufgerufen, um Dropdowns zu füllen.

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

Unten finden Sie die Jquery-Methode zum Auffüllen einer Dropdown-Liste mit der ID "FolderListDropDown".

$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        var elem = $("<option></option>");
        elem.attr("value", result[i].ImageFolderID);
        elem.text(result[i].Name);
        elem.appendTo($("select#FolderListDropDown"));
     }
});