Bagaimana Anda menghapus semua opsi dari kotak pilih dan kemudian menambahkan satu opsi dan memilihnya dengan jQuery?

Menggunakan core jQuery, bagaimana Anda menghapus semua opsi dari kotak pilih, kemudian menambahkan satu opsi dan memilihnya?

Kotak pilih saya adalah sebagai berikut.

<Select id="mySelect" size="9"> </Select>

SUNTING: Kode berikut membantu merantai. Namun, (di Internet Explorer) .val('whatever')tidak memilih opsi yang ditambahkan. (Saya memang menggunakan 'nilai' yang sama di keduanya .appenddan .val.)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

EDIT: Mencoba membuatnya meniru kode ini, saya menggunakan kode berikut ini setiap kali halaman / formulir diatur ulang. Kotak pilih ini diisi oleh satu set tombol radio. .focus()lebih dekat, tetapi opsi tidak muncul dipilih seperti halnya dengan .selected= "true". Tidak ada yang salah dengan kode saya yang ada - Saya hanya mencoba belajar jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

EDIT: jawaban yang dipilih dekat dengan apa yang saya butuhkan. Ini bekerja untuk saya:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

Namun kedua jawaban itu menuntun saya ke solusi akhir saya ..

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

mengapa tidak menggunakan javascript biasa?

document.getElementById("selectID").options.length = 0;

Jika tujuan Anda adalah untuk menghapus semua opsi dari yang dipilih kecuali yang pertama (biasanya opsi 'Silakan pilih item') Anda dapat menggunakan:

$('#mySelect').find('option:not(:first)').remove();

Saya punya bug di IE7 (berfungsi dengan baik di IE6) di mana menggunakan metode jQuery di atas akan menghapus pilih di DOM tetapi tidak di layar. Menggunakan IE Developer Toolbar saya dapat mengkonfirmasi bahwa pilih telah dihapus dan item baru, tetapi secara visual pilih masih menunjukkan item lama - meskipun Anda tidak dapat memilihnya.

Cara mengatasinya adalah dengan menggunakan metode / properites DOM standar (seperti yang dimiliki poster asli) untuk menghapus daripada jQuery - masih menggunakan jQuery untuk menambahkan opsi.

$('#mySelect')[0].options.length = 0;

Tidak yakin persis apa yang Anda maksud dengan "tambahkan satu dan pilih", karena akan tetap dipilih secara default. Tetapi, jika Anda menambahkan lebih dari satu, itu akan lebih masuk akal. Bagaimana dengan sesuatu seperti:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Tanggapan untuk "EDIT" : Dapatkah Anda mengklarifikasi apa yang Anda maksud dengan "Kotak pilih ini diisi oleh seperangkat tombol radio"? Suatu <select>elemen tidak dapat (secara hukum) mengandung <input type="radio">elemen.

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

$("#control").html("<option selected=\"selected\">The Option...</option>");

Berkat jawaban yang saya terima, saya dapat membuat sesuatu seperti yang berikut, yang sesuai dengan kebutuhan saya. Pertanyaan saya agak ambigu. Terima kasih telah menindaklanjuti. Masalah terakhir saya diselesaikan dengan memasukkan "terpilih" dalam opsi yang ingin saya pilih.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Bagaimana kalau hanya mengubah html ke data baru.

$('#mySelect').html('<option value="whatever">text</option>');

Contoh lain:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

1. Pertama hapus semua opsi yang ada, lakukan yang pertama (- Pilih--)

2. Tambahkan nilai opsi baru menggunakan loop satu per satu

   $('#ddlCustomer').find('option:not(:first)').remove();
   for (var i = 0; i < oResult.length; i++) {
      $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
   }

Saya telah menemukan sesuatu di internet seperti di bawah ini. Dengan ribuan opsi seperti dalam situasi saya ini jauh lebih cepat daripada .empty()atau .find().remove()dari jQuery.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

Info lebih lanjut di sini .

Cara lain:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

Di bawah tautan ini, ada praktik baik https://api.jquery.com/select/

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

Baris kode pertama akan menghapus semua opsi dari kotak pilih karena tidak ada opsi menemukan kriteria yang disebutkan.

Baris kode kedua akan menambahkan Opsi dengan nilai yang ditentukan ("testValue") dan Teks ("TestText").

Berdasarkan jawaban mauretto, ini sedikit lebih mudah dibaca dan dipahami:

$('#mySelect').find('option').not(':first').remove();

Untuk menghapus semua opsi kecuali satu dengan nilai tertentu, Anda dapat menggunakan ini:

$('#mySelect').find('option').not('[value=123]').remove();

Ini akan lebih baik jika opsi yang akan ditambahkan sudah ada.

Menggunakan jquery prop () untuk menghapus opsi yang dipilih

$('#mySelect option:selected').prop('selected', false);

Ini akan menggantikan mySelect yang ada dengan mySelect baru.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

Anda dapat melakukannya hanya dengan mengganti html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

Hanya satu baris untuk menghapus semua opsi dari tag pilih dan setelah Anda dapat menambahkan opsi apa pun kemudian buat baris kedua untuk menambahkan opsi.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

• simpan nilai opsi untuk ditambahkan dalam suatu objek
• hapus opsi yang ada di tag pilih
• ulangi objek daftar dan tambahkan konten ke tag pilih yang dimaksud

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

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

Saya melihat kode ini di Select2 - Kliring Seleksi

$('#mySelect').val(null).trigger('change');

Kode ini berfungsi baik dengan jQuery bahkan tanpa Select2

Semoga ini akan berhasil

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');