Bagaimana cara mengubah opsi <select> dengan jQuery?

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

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 

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

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

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

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.

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.

Apakah ini membantu?

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

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.

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