Menambahkan opsi ke <select> menggunakan jQuery?

Apa cara termudah untuk menambahkan optiondropdown menggunakan jQuery?

Akankah ini berhasil?

$("#mySelect").append('<option value=1>My option</option>');

Ini TIDAK bekerja di IE8 (belum di FF):

$("#selectList").append(new Option("option text", "value"));

DID ini berfungsi:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Secara pribadi, saya lebih suka sintaks ini untuk opsi menambahkan:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

Jika Anda menambahkan opsi dari koleksi item, Anda dapat melakukan hal berikut:

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

Anda dapat menambahkan opsi menggunakan sintaks berikut, Anda juga dapat mengunjungi cara menangani opsi di jQuery untuk detail lebih lanjut.

1. $('#select').append($('<option>', {value:1, text:'One'}));

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

Jika nama opsi atau nilainya dinamis, Anda tidak perlu khawatir untuk keluar dari karakter khusus di dalamnya; dalam hal ini Anda mungkin lebih suka metode DOM sederhana:

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

Pilihan 1-

Anda dapat mencoba ini-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

Seperti ini-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Pilihan 2-

Atau coba ini-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

Seperti ini-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Ini sangat sederhana:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

atau

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));

Itu bekerja dengan baik.

Jika menambahkan lebih dari satu elemen opsi, saya sarankan melakukan append satu kali daripada melakukan append pada setiap elemen.

untuk alasan apa pun melakukan $("#myselect").append(new Option("text", "text"));tidak bekerja untuk saya di IE7 +

Saya harus menggunakan $("#myselect").html("<option value='text'>text</option>");

Untuk membantu kinerja, Anda harus mencoba hanya mengubah DOM sekali, terlebih lagi jika Anda menambahkan banyak opsi.

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

Saya suka menggunakan pendekatan non jquery:

mySelect.add(new Option('My option', 1));

Anda dapat menambahkan opsi secara dinamis ke dalam dropdown seperti yang ditunjukkan pada contoh di bawah ini. Di sini, dalam contoh ini saya telah mengambil data array dan mengikat nilai array tersebut ke dropdown seperti yang ditunjukkan pada tangkapan layar keluaran

Keluaran:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Tidak disebutkan dalam jawaban apa pun tetapi bermanfaat jika Anda ingin opsi itu juga dipilih, Anda dapat menambahkan:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

Ada dua cara. Anda dapat menggunakan salah satu dari keduanya.

Pertama:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

Kedua:

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

Jika Anda ingin memasukkan opsi baru pada indeks tertentu di pilih:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

Ini akan memasukkan "Item Baru" sebagai item ke-3 di pilih.

Anda dapat menambahkan dan mengatur atribut Nilai dengan teks:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

Kami menemukan beberapa masalah ketika Anda menambahkan opsi dan menggunakan validasi jquery. Anda harus mengklik satu item di beberapa daftar pilih. Anda akan menambahkan kode ini untuk menangani:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

Bagaimana dengan ini

var numbers = [1, 2, 3, 4, 5];
var option = '';

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

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

Ini hanyalah poin cepat untuk kinerja terbaik

selalu ketika Anda berhadapan dengan banyak opsi, membangun string besar dan kemudian menambahkannya ke 'pilih' untuk kinerja terbaik

fg

var $ mySelect = $ ('# mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

Bahkan lebih cepat

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Jika Anda mendapatkan data dari beberapa objek, maka teruskan objek itu berfungsi ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

Nama dan Id adalah nama properti objek ... sehingga Anda dapat memanggil mereka apa pun yang Anda suka ... Dan tentu saja jika Anda memiliki Array ... Anda ingin membangun fungsi kustom dengan for loop ... dan kemudian panggil saja fungsi itu di siap dokumen ... Ceria

Berdasarkan jawaban dule untuk menambahkan koleksi item, one-linerfor...in juga akan bekerja dengan sangat baik:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

Nilai objek dan indeks ditugaskan untuk opsi. Solusi ini berfungsi bahkan di jQuery lama (v1.4) !

jika Anda memiliki optgroup di dalam pilih , Anda mendapat kesalahan dalam DOM.

Saya pikir cara terbaik:

$("#select option:last").after($('<option value="1">my option</option>'));

Anda dapat mencoba kode di bawah ini untuk menambahkan opsi

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

$('#select_id').append($('<option>',{ value: v, text: t }));

Ini adalah cara saya melakukannya, dengan tombol untuk menambahkan setiap tag pilih.

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

Anda dapat melakukan ini di ES6:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

Jika seseorang datang ke sini mencari cara untuk menambahkan opsi dengan properti data

Menggunakan attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

Menggunakan data - versi ditambahkan 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);