jQuery: Praktik terbaik untuk mengisi drop down?

Contoh yang saya lihat diposting sepanjang waktu sepertinya itu kurang optimal, karena melibatkan string merangkai, yang tampaknya jadi bukan jQuery. Biasanya terlihat seperti ini:

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

Apakah ada cara yang lebih baik?

Andreas Grech cukup dekat ... sebenarnya this(perhatikan referensi thisalih-alih item dalam loop):

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

Apa yang saya lakukan di atas adalah membuat <option>elemen baru dan menambahkannya ke optionsdaftar (dengan asumsi optionsadalah ID dari elemen drop down.

PS Javascript saya agak berkarat sehingga sintaksisnya mungkin tidak sempurna

Tentu - membuat optionsarray string dan gunakan .join('')daripada +=setiap kali melalui loop. Lonjakan performa sedikit ketika berhadapan dengan sejumlah besar opsi ...

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

Iya. Saya masih bekerja dengan string sepanjang waktu. Percaya atau tidak, itu adalah cara tercepat untuk membangun sebuah fragmen DOM ... Sekarang, jika Anda hanya memiliki beberapa pilihan, itu tidak akan menjadi masalah - gunakan teknik yang ditunjukkan Dreas jika Anda suka gaya tersebut. Namun perlu diingat, Anda menggunakan waktu parser HTML internal browser i*2, bukan hanya sekali, dan memodifikasi DOM setiap kali melalui loop ... dengan sejumlah opsi yang cukup. Anda akhirnya akan membayar untuk itu, terutama di browser lama.

Catatan: Seperti yang ditunjukkan keadilan, ini akan berantakan jika ImageFolderIDdan Nametidak dikodekan dengan benar ...

Atau mungkin:

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

Cara tercepat adalah ini:

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

Menurut tautan ini adalah cara tercepat karena Anda membungkus semuanya dalam satu elemen ketika melakukan segala jenis penyisipan DOM.

Saya menemukan ini berfungsi dari situs jquery

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

Saya pernah membaca bahwa menggunakan fragmen dokumen adalah performan karena ia menghindari reflow halaman pada setiap penyisipan elemen DOM, itu juga didukung oleh semua browser (bahkan IE 6).

var fragment = document.createDocumentFragment();

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

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

Saya pertama kali membaca tentang ini dalam kursus Praktik Terbaik JavaScript CodeSchool .

Berikut perbandingan berbagai pendekatan , terima kasih kepada penulis.

Pendekatan lain dengan 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));
    });
  })

Saya menggunakan plugin jquery selectboxes . Ini mengubah contoh Anda menjadi:

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

Saya harap ini membantu. Saya biasanya menggunakan fungsi alih-alih menulis semua kode setiap kali.

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

di sini adalah contoh saya lakukan pada perubahan saya mendapatkan anak-anak dari pilih pertama di pilih kedua

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

Saya telah menggunakan jQuery dan memanggil fungsi untuk mengisi drop down.

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

Di bawah ini adalah cara Jquery mengisi daftar turun bawah yang idnya "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"));
     }
});