Menggunakan core jQuery, bagaimana cara menghapus semua pilihan kotak pilih, kemudian tambahkan satu pilihan dan pilih?
Saya pilih kotak adalah sebagai berikut.
<Select id="mySelect" size="9"> </Select>
EDIT: kode berikut bermanfaat dengan chaining. Namun, (di Internet Explorer) .val('pun')
tidak pilih opsi yang ditambahkan. (Saya menggunakan yang sama 'nilai' di kedua .menambahkan
dan .val
.)
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT: Mencoba untuk mendapatkannya untuk meniru kode ini, saya menggunakan kode berikut setiap kali halaman/form reset. Ini pilih kotak ini diisi dengan sebuah set tombol radio. .focus()
adalah dekat, tapi pilihan tidak muncul dipilih seperti yang dilakukannya dengan .dipilih= "benar"
. Tidak ada yang salah dengan saya ada kode - saya hanya mencoba untuk 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 adalah yang dekat dengan apa yang saya butuhkan. Ini bekerja untuk saya:
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Namun kedua jawaban led saya untuk saya solusi akhir..
Aku punya bug di IE7 (bekerja dengan baik di IE6) di mana di atas menggunakan jQuery metode akan jelas pilih di DOM tetapi tidak pada layar. Menggunakan IE Developer Toolbar saya bisa mengkonfirmasi bahwa pilih telah dibersihkan dan memiliki barang-barang baru, tapi visual pilih masih menunjukkan barang-barang lama anda - meskipun anda tidak bisa memilih mereka.
Perbaikan itu untuk menggunakan standar DOM metode/properites (seperti poster asli punya) ke langit daripada jQuery - masih menggunakan jQuery untuk menambahkan pilihan.
$('#mySelect')[0].options.length = 0;
Tidak yakin apa yang anda maksud dengan "tambahkan satu dan pilih", karena itu akan dipilih secara default pula. Namun, jika anda menambahkan lebih dari satu, itu akan membuat lebih masuk akal. Bagaimana tentang sesuatu seperti:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Tanggapan untuk "EDIT": Dapatkah anda menjelaskan apa yang anda maksud dengan "Ini pilih kotak ini diisi dengan sebuah set tombol radio"? A <select>
elemen tidak dapat (secara hukum) mengandung <input type="radio">
elemen.
Terima kasih untuk jawaban yang saya terima, saya dapat membuat sesuatu seperti berikut, yang sesuai dengan kebutuhan saya. Pertanyaan saya agak ambigu. Terima kasih untuk menindaklanjuti. Terakhir saya masalah ini diselesaikan oleh termasuk "yang dipilih" pada opsi yang saya ingin dipilih.
$(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>
Pertama jelas semua ada pilihan kecuali yang pertama(--Pilih--)
Menambahkan opsi baru nilai menggunakan loop satu per satu
$('#ddlCustomer').menemukan('pilihan:tidak(:pertama)').hapus(); for (var i = 0; i < oResult.length; i++) { $("#ddlCustomer").append(Opsi baru(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID)); }
Bagaimana 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>
');
Cara lain:
$('#select').empty().append($('<option>').text('---------').attr('value',''));
Di bawah ini link, ada praktik-praktik yang baik https://api.jquery.com/select/
Bangunan di mauretto's jawaban, ini adalah sedikit lebih mudah untuk membaca dan memahami:
$('#mySelect').find('option').not(':first').remove();
Untuk menghapus semua pilihan 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 di sana.
I've ditemukan di net sesuatu seperti di bawah ini. Dengan ribuan pilihan seperti dalam situasi saya ini jauh lebih cepat daripada .kosong()
atau `.menemukan().hapus () 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.
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');
Baris pertama dari kode yang akan menghapus semua pilihan kotak pilih karena tidak ada opsi menemukan kriteria yang telah disebutkan.
Baris kedua kode ini akan menambah Opsi dengan nilai yang ditentukan("testValue") dan Teks("TestText").
Hanya satu baris untuk menghapus semua pilihan dari pilih tag dan setelah anda dapat menambahkan opsi kemudian membuat garis kedua untuk menambahkan pilihan.
$('.ddlsl').empty();
$('.ddlsl').append(new Option('Select all', 'all'));
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>