jQuery: Praktik terbaik untuk mengisi drop down?


269

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?

Jawaban:


448

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

5
Sejarah kuno di sini saya tahu, tetapi bagi para googler seperti saya yang baru saja menemukan ini sekarang, tidakkah akan lebih cepat jika Anda mengkloning sebuah <option/>elemen daripada membuat masing-masing?
Tedder

2
Kurasa tidak ... baik itu instantiate item baru.
quillbreaker

9
Bagus! Meskipun saya pikir contohnya mungkin lebih jelas jika elemen bernama "#dropdown" atau lebih, karena lebih mencerminkan elemen induk sebenarnya dari opsi.
Anders

4
Saya pikir membangun semua opsi dalam memori (dengan variabel string) terlebih dahulu dan kemudian menambahkan string ini ke induk pilih kontrol harus lebih efisien, karena ini hanya akan menyebabkan satu kali tata letak halaman
Wint

1
Maaf jika mendapat pemberitahuan dan tidak melihat apa pun. Saya menghapus komentar saya sebelumnya. Karena saya lebih mengerti jawabannya setelah membaca komentar saya sendiri :)
ivange

71
$.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


1
Itu cukup dekat, dan membuat saya ke arah yang benar. Lihat jawaban saya di bawah ini.
Jeff Putz

Manis! benar-benar membantu, saya telah mengisi dropdown saya untuk waktu yang lama, dan itu selalu terlihat tidak profesional
Kyle

41

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 ...


1
Anda harus encode result[i].ImageFolderIDdan result[i].Namesebagai html-atribut-nilai dan html-teks masing-masing. Saya tidak akan berasumsi mereka datang dari server yang sudah disandikan, karena saya akan berasumsi bahwa server mengembalikan json, bukan json bastardized.
yfeldblum

@Justice: Anda benar, tetapi karena contoh Jeff menghilangkannya, saya juga melakukannya. Akan menambahkan catatan, terima kasih.
Shog9

1
Saya memilih jawaban yang diberikan @Ricibald karena anehnya, berdasarkan tes yang saya temukan , ternyata penggabungan lebih cepat daripada joindi hampir setiap browser.
weir

24

Atau mungkin:

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

6
var myOptions = {val1: 'text1', val2: 'text2'}; $ .each (myOptions, function (val, text) {$ ('# mySelect'). append (Opsi baru (teks, val));});
The Demz

19

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.


Namun dengan replaceWith Anda mengganti pilih di dom kehilangan acara yang sudah terpasang ke pilih saya pikir itu akan lebih baik dengan options.html (optionsValue) jika Anda ingin melestarikan acara
Geomorillo

12

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

5

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.


Ini jelas cara cepat. Bahkan lebih baik - lewati jQuery dengan ini bersama-sama:result.forEach(function(el){var option=document.createElement('option').option.textContent=el.name;option.value=el.ImageFolderID);fragment.appendChild(el);
dgo

5

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

2

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

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

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

1

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

1
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

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


0

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

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

0

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"));
     }
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.