jQuery: Best Practice zu bevöl Dropdown?

Question

Das Beispiel, das ich sehe die ganze Zeit geschrieben scheint, wie es suboptimal ist, weil es Verketten von Strings beinhaltet, die so nicht jQuery scheint. Es sieht in der Regel wie folgt 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?

Answer 1

Andreas Grech war ziemlich nah ... es ist eigentlich this (man beachte die Referenz anstelle des Elements in der Schleife this):

var $dropdown = $("#dropdown");
$.each(result, function() {
    $dropdown.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));
    });
});

Was mache ich über ein neues <option> Element zu schaffen und es in die options Liste hinzugefügt (unter der Annahme options ist die ID eines Drop-down-Element.

PS Mein Javascript ist ein bisschen rostig, so dass die Syntax nicht perfekt sein kann

Answer 3

Sicher - machen options ein Array von Strings und verwenden .join('') anstatt += jedes Mal durch die Schlaufe. Leichte Performance Beule, wenn sie mit einer großen Anzahl von Optionen zu tun ...

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 mit Streichern die ganze Zeit. Ob Sie es glauben oder nicht, das ist der schnellste Weg, ein DOM-Fragment zu bauen ... Nun, wenn Sie nur ein paar Optionen, wird es nicht wirklich wichtig - die Technik verwenden Dreas zeigt , wenn Sie wie der Stil. Aber bedenken Sie, sind Sie den Aufruf des internen HTML-Parser i*2 Zeiten des Browsers, und nicht nur einmal, und Modifizieren des DOM jedes Mal durch die Schleife ... mit einer ausreichenden Anzahl von Optionen. Sie dafür zu bezahlen, vor allem auf älteren Browsern enden.

Hinweis: Wie Richter darauf hinweist, wird diese auseinander fallen, wenn ImageFolderID und Name sind nicht kodiert richtig ...

Answer 4

Oder vielleicht:

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

Answer 5

Der schnellste Weg ist dies:

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

Nach Link ist der schnellste Weg, weil man alles in einem einzigen Elemente wickeln, wenn jede Art von DOM Einfügung zu tun.

Answer 6

Ich fand das von jquery Baustelle arbeiten werden

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

Answer 7

Ich habe gelesen, dass die Verwendung von Dokumentfragmente ist performant, da sie Seite Reflow bei jedem Einfügen von DOM-Elemente vermeidet, ist es auch gut von allen Browsern unterstützt (auch IE 6).

var fragment = document.createDocumentFragment();

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

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

Ich las zuerst über dieses in CodeSchool JavaScript-Best Practices Kurs .

Hier ist ein Vergleich verschiedenen Ansätze dank den Autor gehen .

Answer 8

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

Answer 9

Ich verwende die Select jQuery-Plugin. Es stellt sich Ihr Beispiel in:

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

Answer 10

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

Answer 11

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

Answer 12

Ich hoffe, es hilft. Normalerweise verwende ich stattdessen die Funktionen des gesamten Code jedes Mal 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));
        });
    });
});

Answer 13

Ich habe jQuery benutze und den Aufruf einer Funktion Drop-downs zu füllen.

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

Answer 14

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

Answer 15

Hier ist ein Beispiel i auf Änderung habe ich bekommen Kinder von der ersten Sekunde wählen, wählen Sie in

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