Apa cara terbaik untuk menambahkan opsi ke pilih dari sebagai objek JavaScript dengan jQuery?


1380

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

Saya mencari sesuatu yang tidak perlu dilakukan oleh plugin, tetapi saya juga akan tertarik dengan plugin yang ada di luar sana.

Inilah 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 adalah versi matdumsa yang dibersihkan dan disederhanakan :

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

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


4
mungkin membantu: texotela.co.uk/code/jquery/select (itu adalah bantuan bagi saya setelah saya menemukan pertanyaan ini)
ManBugra

2
Versi pembersihan yang tercantum di atas hanya berfungsi di Jquery 1.4+. Untuk versi yang lebih lama gunakan jawaban
matdumsa

{value: key} harus {"value": key} seperti yang terlihat dalam jawaban matdumsa.
Nick P

Saya tidak percaya karena valueini adalah string (dan hard code) tidak perlu dikutip.
Darryl Hein

1
Judulnya seharusnya bukan "Apa cara terbaik untuk menambahkan opsi ke pilih dari objek JSON dengan jQuery?
Dr Fred

Jawaban:


1384

Sama seperti jawaban lain, dalam mode jQuery:

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

99
Saya pertama-tama akan menetapkan $("#mySelect")untuk var, jika tidak memanggil $("#mySelect")setiap kali di dalam loop sangat boros, seperti memperbarui DOM. Lihat poin # 3 dan # 6 di artzstudio.com/2009/04/jquery-performance-rules/…
Patrick

7
baik Anda bisa melakukan var mySelect = $("#mySelect") outside of the loop masing-masing`. Itu akan jauh lebih efisien. Lihat jawaban Carl di bawah ini
Patrick

17
Rekomendasi saya untuk gaya jQuery yang lebih baik: $ ('# mySelect') .append ($ ("<option />") .val (kunci) .text (nilai));
FAjir

10
Dengan popularitas jawaban ini patut disebutkan Anda harus menghindari pembaruan DOM dalam loop. jsperf.com/jquery-append-array-vs-string
jthomas

6
jawaban ini sangat menyesatkan karena niat yang salah ... attrdan textsebenarnya adalah metode- $('<option/>')objek
phil294

268
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 satu kali.

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


20
Metode Anda jelas lebih cepat daripada jawaban 'benar' di atas karena menggunakan lebih sedikit jQuery juga.
Teej

4
baris "$ ('# mySelect'). dapatkan (0) .innerHTML = output.join ('');" bekerja di Chrome dan FF3.x tetapi tidak di IE7 sejauh yang saya tahu
blu

19
Ini rusak jika keyada beberapa kutipan atau >, <di dalamnya.
nickf

3
Dan, jika saya memiliki dua opsi yang saya tidak ingin kehilangan. Bagaimana saya bisa menambahkan nilai opsi baru ini ke yang sudah ada?
VansFannel

6
Satu peningkatan kecil adalah menggabungkan menggunakan gabungan daripada tanda plus, seperti: output.push ('<option value = "', key, '">', value, '</option>');
MM.

202

Ini sedikit lebih cepat dan lebih bersih.

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>


3
Sempurna. Untuk menambahkannya, atribut tambahan untuk pilih dapat ditambahkan. $ .each (selectValues, function (id, value, text) {$ ('# mySelect'). tambahkan ($ ("<option />", {id: id value: nilai, teks: teks}));} );
idok

45
Itu pikir itu akan menjadi ide yang lebih baik untuk me-cache `$ ('# mySelect')`, sehingga Anda mencari hanya sekali sebelum loop. Saat ini sedang mencari DOM untuk elemen untuk setiap opsi.
Sushanth -

@ Sushanth - seberapa besar hit kinerja ini jika set kecil?
ckarbass

3
@ckarbass - tergantung seberapa besar DOM Anda. Upaya yang berpotensi besar dan sangat sedikit untuk menetapkannya ke variabel, jauh lebih sedikit daripada menulis komentar di SO!
Nick H247

97

jQuery

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

JavaScript vanila

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

4
Belum pernah mendengar Optionobjek sebelumnya. Apakah itu dibangun di semua browser?
Darryl Hein

2
Saya mencoba menggunakan new Option, tetapi ternyata tidak bekerja di IE6 & 7. Saya tidak punya alasan mengapa, tetapi banyak opsi jQuery lengkap bekerja.
Darryl Hein

Cara yang bagus untuk menambahkan pilihan juga. new Option('display', value, true)
boatcoder

@ Mark0978 sebenarnya ini new Option('display', value, true, true)( javascriptkit.com/jsref/select.shtml )
Carl Hörberg

38

Jika Anda tidak harus mendukung versi IE lama, menggunakan Optionkonstruktor jelas merupakan cara yang harus dilakukan, solusi yang mudah dibaca dan efisien :

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

Ini fungsionalitasnya setara, tetapi lebih bersih dari:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

31

Ini terlihat lebih bagus, memberikan keterbacaan, 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 (teruji!) 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(''));

Bukankah ini berarti cara "tercepat" akan menyisipkan berbagai bagian string sebagai item array individual juga, alih-alih menggabungkan setiap opsi yang membentuk sebelum memasukkan dalam array, karena mereka semua akan bergabung sebagai satu pada akhirnya?
bitoolean

22

Penyempurnaan dari jawaban @ joshperry yang lebih lama :

Tampaknya. Append juga berfungsi seperti yang diharapkan,

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

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

atau lebih pendek,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

dapat Anda gunakan sebagai alternatif $.weakmapuntukGC
Chef_Code

2
Poin bonus untuk keanggunan: menggunakan map()konstruk secara tepat, dikombinasikan dengan properti append()untuk menambahkan array objek dengan benar!
Jochem Schulenklopper

@ joshperry Saya agak kecewa karena saya mengharapkan koreksi / pembaruan teknis.
Сухой27

20

Semua jawaban ini tampaknya 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 sepenuhnya kompatibel lintas browser.


Haruskah begitu new Option(value, key);? Urutan parameter adalah Opsi (text_visible_part, value_behind_the_scenes).
Bob Stein

Bukankah Array mendorong lintas-browser yang kompatibel? Lalu, Bukankah ini tidak perlu rumit, ketika push Array lebih mudah dibaca?
bitoolean

18

Diperingatkan ... Saya menggunakan jQuery Mobile 1.0b2 dengan PhoneGap 1.0.0 di 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);

18
 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, melakukan pekerjaan tercepat. : P


1
. masing-masing sangat lambat dibandingkan dengan cara lain untuk mencapai hasil yang sama. Inilah yang saya pikirkan dan akan merekomendasikan pendekatan ini.
Allen Tellez

Sangat disayangkan bahwa 90% variasi di sini menggunakan $ .each (). A for () loop dapat memberi Anda lebih banyak kontrol dan manfaat kinerja, bahkan jika itu kurang kompak.
HoldOffHunger

15

Ada pendekatan menggunakan pendekatan Microsoft Templating yang saat ini sedang dalam proposal untuk dimasukkan ke dalam jQuery core. Ada lebih banyak kekuatan dalam menggunakan templating sehingga untuk skenario paling sederhana itu mungkin bukan pilihan terbaik. Untuk lebih jelasnya lihat posting Scott Gu menguraikan fitur.

Pertama termasuk file tempsating js, tersedia dari github .

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

Selanjutnya atur templat

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

Kemudian dengan panggilan data Anda metode .render ()

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

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

Saya telah membuat blog pendekatan ini secara lebih rinci.


12

Saya telah membuat sesuatu seperti ini, memuat item dropdown melalui Ajax . Tanggapan di atas juga dapat diterima, tetapi selalu baik untuk memiliki modifikasi DOM sesedikit mungkin untuk kinerja yang lebih baik.

Jadi daripada menambahkan setiap item di dalam satu lingkaran, lebih baik mengumpulkan item dalam satu lingkaran dan menambahkannya setelah selesai.

$(data).each(function(){
    ... Collect items
})

Tambahkan itu,

$('#select_id').append(items); 

atau bahkan lebih baik

$('#select_id').html(items);

$ ('# select_id'). html (item); bekerja persis seperti yang saya inginkan. Menggunakan menambahkan itu terus menambahkan item di semua acara pertukaran. Terima kasih banyak.
Dipanwita Das

10

Cara sederhananya adalah:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

Saya sudah membuat daftar opsi saya, sehingga mengisi bidang pilih semudah Willard mengatakan.
Loony2nz

10

Sebagian besar jawaban lain menggunakan eachfungsi untuk beralih di atasselectValues . Ini mensyaratkan bahwa append dipanggil untuk setiap elemen dan reflow dipicu ketika masing-masing ditambahkan secara individual.

Memperbarui jawaban ini ke metode fungsional yang lebih idiomatis (menggunakan JS modern) dapat dibentuk appendhanya untuk memanggil sekali, dengan array optionelemen yang dibuat menggunakan peta dan Optionkonstruktor elemen.

Menggunakan Optionelemen DOM harus mengurangi overhead panggilan fungsi karena optionelemen tidak perlu diperbarui setelah pembuatan dan logika parsing jQuery tidak perlu dijalankan.

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

Ini dapat disederhanakan lebih lanjut jika Anda membuat fungsi utilitas pabrik yang akan membuat objek opsi baru:

const newoption = (...args) => new Option(...args)

Maka ini dapat diberikan langsung ke map:

$('mySelect').append($.map(selectValues, newoption))

Formulasi sebelumnya

Karena appendjuga memungkinkan lewat nilai sebagai jumlah variabel argumen, kita bisa membuat daftar optionelemen peta dan menambahkannya sebagai argumen dalam satu panggilan dengan menggunakan apply.

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

Sepertinya itu di versi jQuery yang lebih baru, appendjuga menerima argumen array dan ini dapat disederhanakan:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

10
function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Ini bekerja dengan baik dengan jQuery 1.4.1.

Untuk artikel lengkap untuk menggunakan daftar dinamis dengan ASP.NET MVC & jQuery kunjungi:

Daftar Pilih Dinamis dengan MVC dan jQuery


8

Ada masalah pengurutan dengan solusi ini di Chrome (jQuery 1.7.1) (Chrome mengurutkan properti objek berdasarkan nama / nomor?) Jadi untuk menjaga urutannya (ya, itu penyalahgunaan objek), saya mengubah ini:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

untuk ini

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

dan $ .each akan terlihat seperti:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

8

Daripada mengulangi kode yang sama di mana-mana, saya akan menyarankan lebih diinginkan untuk menulis fungsi jQuery Anda sendiri seperti:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Kemudian untuk menambahkan opsi lakukan saja hal berikut:

$('select').addOption('0', 'None');

Bisakah Anda menguraikan?
Mo

7

Anda bisa mengulangi json array Anda dengan kode berikut

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");


7

Meskipun jawaban sebelumnya adalah semua jawaban yang valid - mungkin disarankan untuk menambahkan semua ini ke documentFragmnet terlebih dahulu, kemudian menambahkan fragmen dokumen sebagai elemen setelah ...

Lihat pemikiran John Resig tentang masalah ini ...

Sesuatu di sepanjang garis:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

7
  1. $.each lebih lambat dari a for loop
  2. Setiap kali, pilihan DOM bukan praktik terbaik dalam lingkaran $("#mySelect").append();

Jadi solusi terbaik adalah sebagai berikut

Jika data JSON respadalah

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

gunakan sebagai

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

6

Namun cara lain untuk melakukannya:

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

Saya melihat apa yang Anda lakukan di sini ... Anda menerima saran untuk di-cache $('#mySelect')lalu refactored @rocktheroad jawaban ... apa pun, ini adalah solusi yang lebih praktis
Chef_Code

6
if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Ini memanipulasi DOM hanya sekali setelah pertama kali membangun string raksasa.


Anda dapat mengoptimalkan ini lebih jauh dan menghindari penggunaan jQuery sama sekali dengan menggantinya $("#myselect").empty().append(opts);dengangetElementById('myselect').innerHtml = opts;
vahanpwns

6

Itulah yang saya lakukan dengan array dua dimensi: Kolom pertama adalah item i, menambah innerHTMLsatu <option>. Kolom kedua RECORD_ID i, menambah valuedari <option>:

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
    $items_arr = array();
    $i = 0;
    foreach ($items as $item)
    {
        $first_name = $item->first_name;
        $last_name = $item->last_name;
        $date = $item->date;
        $show = $first_name . " " . $last_name . ", " . $date;
        $request_id = $request->request_id;
        $items_arr[0][$i] = $show;
        $items_arr[1][$i] = $request_id;
        $i++;
    }
    
    echo json_encode($items_arr);
  2. JavaScript / Ajax

            function ddl_items() {
                if (window.XMLHttpRequest) {
                    // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    // Code for Internet Explorer 6 and Internet Explorer 5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var arr = JSON.parse(xmlhttp.responseText);
                    var lstbx = document.getElementById('my_listbox');
    
                    for (var i=0; i<arr.length; i++) {
                        var option = new Option(arr[0][i], arr[1][i]);
                        lstbx.options.add(option);
                    }
                }
            };
    
            xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
            xmlhttp.send();
        }
    }

Kelihatan bagus. Sayang sekali tidak menggunakan jQuery. Saya juga pernah mengalami masalah dengan metode select.options.add (). Tidak dapat mengingat browser mana dan masalah yang sebenarnya, tetapi saya memutuskan untuk mengambil jalan keluar darinya dan membiarkan jQuery menangani perbedaannya.
Darryl Hein

im noob total dengan PHP dan JQuerry, tetapi kode di atas bekerja di semua browser. satu-satunya masalah - itu tidak berfungsi dengan baik pada iPhone, saya memposting pertanyaan tentang hal itu, tidak beruntung sejauh ini :( stackoverflow.com/questions/11364040/...
Salty


5

Saya menemukan bahwa ini sederhana dan berfungsi dengan baik.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

4

Format JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

Dan kode jQuery untuk mengisi nilai ke Dropdown pada kesuksesan Ajax:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

3

Dengan menggunakan fungsi $ .map (), Anda dapat melakukan ini dengan cara yang lebih elegan:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

Itu agak lebih pendek, tetapi satu masalah yang dihadapi adalah melarikan diri dari val dan vars kunci yang dilakukan oleh jawaban yang diterima.
Darryl Hein

2
<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

2

Tetapkan id pilih HTML Anda menjadi baris berikut di bawah ini. Di sini mySelectdigunakan sebagai id dari elemen pilih.

   var options = $("#mySelect");

kemudian dapatkan objek yang merupakan selectValues ​​dalam skenario ini dan set ke jquery untuk setiap loop. Ini akan menggunakan nilai dan teks objek sesuai dan menambahkannya ke dalam pilihan opsi sebagai berikut.

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

Ini akan menampilkan teks sebagai daftar opsi ketika daftar drop-down dipilih dan setelah teks dipilih nilai teks yang dipilih akan digunakan.

Misalnya.

"1": "test 1", "2": "test 2",

Dropdown,

nama tampilan: tes 1 -> nilai 1 nama tampilan: tes 2 -> nilai 2


tolong jelaskan sedikit tentang solusinya.
Vinay Prajapati

2

Sebenarnya, untuk mendapatkan peningkatan kinerja, lebih baik membuat daftar opsi secara terpisah dan menambahkan untuk memilih id.

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

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.