web-dev-qa-db-de.com

jQuery: Best Practice zum Füllen von Dropdown?

Das Beispiel, das ich ständig gepostet sehe, scheint suboptimal zu sein, weil es die Verkettung von Strings beinhaltet, was jQuery nicht so 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?

250
Jeff Putz

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

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

Was ich oben mache, ist das Erstellen eines neuen <option>-Elements und das Hinzufügen zur options-Liste (vorausgesetzt, options ist die ID eines Dropdown-Elements).

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

64
Andreas Grech

Sicher machen Sie options ein Array von Strings und verwenden Sie .join('') anstelle von += jedes Mal durch die Schleife. Leichte Performance-Beeinträchtigung bei vielen 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 mit Saiten. Ob Sie es glauben oder nicht, das ist der schnellste Weg, ein DOM-Fragment zu erstellen ... Wenn Sie nur wenige Optionen haben, ist es unwichtig - verwenden Sie die Technik zeigt Dreas , wenn Sie den Stil mögen. Denken Sie jedoch daran, dass Sie den internen HTML-Parser i*2 des Browsers nicht nur einmal aufrufen, sondern das DOM jedes Mal durch die Schleife ändern ... mit einer ausreichenden Anzahl von Optionen. Am Ende zahlen Sie dafür, besonders bei älteren Browsern.

Hinweis: Wie Justice hervorhebt, fällt dies auseinander, wenn ImageFolderID und Name nicht korrekt codiert sind ... 

39
Shog9

Oder vielleicht:

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

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 der schnellste Weg, weil Sie alles in ein einzelnes Element einschließen, wenn Sie DOM-Einfügungen ausführen.

15
Ricibald

Ich fand das von der Jquery-Site aus zu arbeiten

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

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));
    });
  })
4
Israel Perales

Ich habe gelesen, dass die Verwendung von document fragments performant ist, da bei jedem Einfügen eines DOM-Elements ein Seitenumbruch vermieden wird. Außerdem wird dies von allen Browsern (sogar IE 6) gut unterstützt.

var fragment = document.createDocumentFragment();

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

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

Ich habe darüber zuerst in CodeSchools JavaScript Best Practices-Kurs gelesen.

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

3
Dapeng Li

Ich benutze das selectboxes jquery Plugin. Es macht aus Ihrem Beispiel:

$('#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

Ich habe jQuery verwendet und eine Funktion zum Auffüllen von Dropdowns aufgerufen.

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

hier ist ein Beispiel, das ich bei der Ä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 hoffe, es hilft. Ich benutze normalerweise Funktionen und schreibe den ganzen Code jedes Mal.

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