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


Menggunakan jQuery inti, bagaimana Anda menghapus semua opsi kotak pilih, lalu tambahkan satu opsi dan pilih itu?

Kotak pilih saya adalah sebagai berikut.

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

EDIT: Kode berikut membantu dengan chaining. Namun, (di Internet Explorer) .val('whatever') tidak memilih opsi yang ditambahkan. (Saya memang menggunakan 'nilai' yang sama di keduanya .append dan .val.)

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

EDIT: Mencoba mendapatkannya untuk meniru kode ini, saya menggunakan kode berikut setiap kali halaman / form direset. Kotak pilihan 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 berhasil untuk saya:

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

Tapi kedua jawaban itu membawaku ke solusi terakhirku ..


876
2017-09-06 20:53


asal


Jawaban:


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

1477
2017-09-06 21:01



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

616
2017-12-16 21:07



mengapa tidak menggunakan javascript biasa saja?

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

102
2017-11-13 19:45



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

Perbaikannya adalah menggunakan metode / propere DOM standar (seperti yang dimiliki oleh poster) untuk menghapus alih-alih jQuery - masih menggunakan jQuery untuk menambahkan opsi.

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

71
2018-01-11 09:22



Jika sasaran Anda adalah menghapus semua opsi dari pilihan kecuali yang pertama (biasanya opsi 'Silakan pilih item'), Anda dapat menggunakan:

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

67
2018-03-27 09:56



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

23
2018-06-03 20:48



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

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

Tanggapan untuk "EDIT": Bisakah Anda menjelaskan apa yang Anda maksud dengan "Kotak pilihan ini diisi oleh satu set tombol radio"? Elemen <select> tidak dapat (secara legal) mengandung elemen <input type = "radio">.


22
2017-09-08 18:51



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

19
2018-03-30 02:30