Bagaimana cara mengubah opsi <select> dengan jQuery?


271

Misalkan daftar opsi tersedia, bagaimana Anda memperbarui <select>dengan yang baru <option>?

Jawaban:


600

Anda dapat menghapus opsi yang ada dengan menggunakan emptymetode ini, dan kemudian menambahkan opsi baru Anda:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

Jika Anda memiliki opsi baru di suatu objek, Anda dapat:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

Sunting: Untuk menghapus semua opsi kecuali yang pertama, Anda dapat menggunakan :gtpemilih, untuk mendapatkan semua optionelemen dengan indeks lebih besar dari nol dan removemereka:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 

2
Bagaimana tetap menjadi opsi pertama saat kosong ()?
Topeng

2
Jika menggunakan bootstrap-pilih kemudian tambahkan berikut untuk me-refresh pilih picker setelah mengganti pilihan: $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');. Kalau tidak, opsi baru tidak akan terlihat di daftar pilih Anda.
phn

Bagaimana saya bisa memeriksa salah satu opsi ini?
Darós

Saya pribadi menemukan sintaks ini sedikit lebih bersih untuk membuat simpul jQuery$el.append($('<option/>', { value: value, text: key }));
rorofromfrance

Terima kasih kawan jika Anda harus menetapkan nilai yang dipilih ketika kami mengedit halaman untuk nilai yang dipilih default, kami dapat menggunakan sesuatu seperti ini dalam loop untuk iterasi tertentu, kami dapat menambahkan $ el.append yang dipilih ($ ('<option />', {value : value, terpilih: 'terpilih', teks: kunci}));
Pengembang

79

Saya melemparkan jawaban CMS yang sangat baik ke ekstensi jQuery cepat:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

Itu mengharapkan array objek yang berisi kunci "teks" dan "nilai". Jadi penggunaannya adalah sebagai berikut:

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);

14
$('#comboBx').append($("<option></option>").attr("value",key).text(value));

di mana comboBx adalah id kotak kombo Anda.

atau Anda dapat menambahkan opsi sebagai string ke innerHTML yang sudah ada dan kemudian menetapkan ke innerHTML pilih.

Edit

Jika Anda perlu menyimpan opsi pertama dan menghapus semua yang lain maka Anda dapat menggunakan

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);

Anda tidak menghapus opsi lama?
Topeng

Apakah Anda ingin menghapus yang lama atau hanya menambahkan opsi baru ke opsi yang ada?
rahul

5

Untuk beberapa alasan aneh bagian ini

$el.empty(); // remove old options

dari solusi CMS tidak bekerja untuk saya, jadi alih-alih saya hanya menggunakan ini

el.html(' ');

Dan itu berhasil. Jadi kode kerja saya sekarang terlihat seperti itu:

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

3

Menghapus dan menambahkan elemen DOM lebih lambat daripada modifikasi yang sudah ada.

Jika set pilihan Anda memiliki panjang yang sama, Anda dapat melakukan sesuatu seperti ini:

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

Jika set pilihan baru Anda memiliki panjang yang berbeda, Anda dapat menghapus / menambahkan opsi kosong yang benar-benar Anda butuhkan, menggunakan beberapa teknik yang dijelaskan di atas.


1

Jika misalnya kode html Anda mengandung kode ini:

<select id="selectId"><option>Test1</option><option>Test2</option></select>

Untuk mengubah daftar opsi di dalam pilihan Anda, Anda dapat menggunakan kode ini di bawah. ketika nama Anda pilih bernama selectId .

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);

dalam contoh di atas saya mengubah daftar opsi lama dengan hanya satu opsi baru.


1
Mengapa OP harus mencoba ini? Silakan tambahkan penjelasan tentang apa yang Anda lakukan dan mengapa Anda melakukannya dengan cara tidak hanya untuk OP tetapi untuk pengunjung masa depan ke SO.
Jay Blanchard

1

Apakah ini membantu?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;

3
Pertanyaan ini adalah tentang secara dinamis menambahkan <option> ke <select>, tidak memilih opsi tertentu.
sisve

1

Sekolah lama melakukan sesuatu dengan tangan selalu baik untukku.

  1. Bersihkan pilih dan tinggalkan opsi pertama:

        $('#your_select_id').find('option').remove()
        .end().append('<option value="0">Selec...</option>')
        .val('whatever');
  2. Jika data Anda berasal dari Json atau apa pun (hanya Concat data):

        var JSONObject = JSON.parse(data);
        newOptionsSelect = '';
        for (var key in JSONObject) {
            if (JSONObject.hasOwnProperty(key)) {
                var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
            }
        }
    
        $('#your_select_id').append( newOptionsSelect );
  3. My Json Objetc:

        [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

Solusi ini sangat ideal untuk bekerja dengan Ajax, dan menjawab dalam Json dari database.


0

jika kami memperbarui secara <select>konstan dan kami perlu menyimpan nilai sebelumnya:

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');
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.