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 .append
dan .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 ..
sumber
.append($("<option></option>").attr("value", '123').text('ABC!')
.append($("<option></option>", {'value':'123'}).text('ABC!')
sumber
empty()
ternyata lebih cepat tentu saja;) jsperf.com/find-remove-vs-empty.val('whatever')
di akhir rantai seperti pada jawaban Matt.mengapa tidak menggunakan javascript biasa?
sumber
Jika tujuan Anda adalah untuk menghapus semua opsi dari yang dipilih kecuali yang pertama (biasanya opsi 'Silakan pilih item') Anda dapat menggunakan:
sumber
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.
sumber
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:
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.sumber
sumber
sumber
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.
sumber
Bagaimana kalau hanya mengubah html ke data baru.
Contoh lain:
sumber
Pertama hapus semua opsi yang ada, lakukan yang pertama (- Pilih--)
Tambahkan nilai opsi baru menggunakan loop satu per satu
sumber
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.Info lebih lanjut di sini .
sumber
Cara lain:
Di bawah tautan ini, ada praktik baik https://api.jquery.com/select/
sumber
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").
sumber
Berdasarkan jawaban mauretto, ini sedikit lebih mudah dibaca dan dipahami:
Untuk menghapus semua opsi kecuali satu dengan nilai tertentu, Anda dapat menggunakan ini:
Ini akan lebih baik jika opsi yang akan ditambahkan sudah ada.
sumber
Menggunakan jquery prop () untuk menghapus opsi yang dipilih
sumber
Ini akan menggantikan mySelect yang ada dengan mySelect baru.
sumber
Anda dapat melakukannya hanya dengan mengganti html
sumber
sumber
sumber
Saya melihat kode ini di Select2 - Kliring Seleksi
Kode ini berfungsi baik dengan jQuery bahkan tanpa Select2
sumber
Semoga ini akan berhasil
sumber
sumber