Pertanyaan Apa cara terbaik untuk menambahkan opsi untuk memilih dari sebagai objek JS dengan jQuery?


Apa metode terbaik untuk menambahkan opsi ke <select> dari objek JavaScript menggunakan jQuery?

Saya mencari sesuatu yang saya tidak butuh plugin untuk dilakukan, tetapi saya juga tertarik dengan plugin yang ada di luar sana.

Ini yang saya lakukan:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Solusi bersih / sederhana:

Ini dibersihkan dan disederhanakan versi matdumsa:

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

Perubahan dari matdumsa's: (1) menghapus tag dekat untuk opsi di dalam append () dan (2) memindahkan properti / atribut ke dalam peta sebagai parameter kedua dari append ().


1204
2017-10-04 20:58


asal


Jawaban:


Sama dengan jawaban lainnya, dalam mode jQuery:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

1222
2017-10-04 21:12



var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

Dengan cara ini Anda "menyentuh DOM" hanya sekali saja.

Saya tidak yakin apakah baris terbaru dapat diubah menjadi $ ('# mySelect') .html (output.join ('')) karena saya tidak tahu jQuery internal (mungkin itu melakukan beberapa parsing di html () metode)


238
2017-11-05 19:42



Ini sedikit lebih cepat dan lebih bersih.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});

181
2017-07-01 07:00



jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanilla JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

77
2018-05-31 22:52



Menggunakan Plugin DOM Elements Creator (kesukaanku):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Menggunakan Option konstruktor (tidak yakin tentang dukungan browser):

$(new Option('myText', 'val')).appendTo('#mySelect');

Menggunakan document.createElement (hindari kerja ekstra mengurai HTML dengan $("<option></option>")):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

30
2017-10-05 15:49



Ini terlihat lebih bagus, lebih mudah dibaca, tetapi lebih lambat daripada metode lain.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Jika Anda menginginkan kecepatan, cara tercepat (yang telah diuji!) Adalah ini, menggunakan larik, bukan penggabungan string, dan hanya menggunakan satu panggilan tambahan.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

25
2017-12-21 15:50



Semua jawaban ini sepertinya tidak perlu rumit. Yang kamu butuhkan adalah:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Itu benar-benar kompatibel lintas browser.


17
2017-10-11 17:20



@joshperry

Tampaknya polos itu .menambahkan juga berfungsi seperti yang diharapkan,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

15
2018-04-17 11:29



 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

Saya telah melakukan beberapa tes dan ini, saya percaya, apakah pekerjaan itu yang tercepat. : P


14
2017-11-09 06:29



Dahulukan ... Saya menggunakan jQuery Mobile 1.0b2 dengan PhoneGap 1.0.0 pada ponsel Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) dan tidak bisa mendapatkan metode .append () untuk bekerja sama sekali. Saya harus menggunakan .html () seperti berikut:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

12
2017-09-16 13:22



Ada pendekatan menggunakan Pendekatan Microsoft Templating yang saat ini di bawah proposal untuk dimasukkan ke dalam inti jQuery. Ada lebih banyak kekuatan dalam menggunakan templating jadi untuk skenario yang paling sederhana itu mungkin bukan pilihan terbaik. Untuk lebih jelasnya lihat posting Scott Gu yang menguraikan fitur-fiturnya.

Pertama, masukkan file templating js, tersedia dari github.

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Selanjutnya set-up template

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Kemudian dengan data Anda, panggil metode .render ()

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

Saya sudah blogged pendekatan ini secara lebih rinci.


11
2017-07-08 05:00