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

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

Sama seperti jawaban lain, dalam mode jQuery:

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

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)

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>

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

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

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

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

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.

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

 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

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.

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

Cara sederhananya adalah:

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

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

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

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

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

Anda bisa mengulangi json array Anda dengan kode berikut

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

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

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

Namun cara lain untuk melakukannya:

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

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.

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

Plugin jQuery dapat ditemukan di sini: Pengisian Otomatis Select Boxes menggunakan jQuery & AJAX .

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

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
}

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

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

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

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/