Çekirdek jQuery kullanarak, bir seçim kutusunun tüm seçeneklerini nasıl kaldırır, ardından bir seçenek ekler ve onu seçersiniz?
Seçim kutum aşağıdaki gibidir.
<Select id="mySelect" size="9"> </Select>
DÜZENLEME: Aşağıdaki kod zincirleme konusunda yardımcı oldu. Ancak, (Internet Explorer'da) .val('whatever')
eklenen seçeneği seçmedi. (Hem .append' hem de
.val' içinde aynı 'value' değerini kullandım).
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT: Bu kodu taklit etmesini sağlamaya çalışırken, sayfa/form her sıfırlandığında aşağıdaki kodu kullanıyorum. Bu seçim kutusu bir dizi radyo düğmesi ile doldurulur. .focus()daha yakındı, ancak seçenek
.selected= "true"` ile olduğu gibi seçili görünmüyordu. Mevcut kodumda hiçbir sorun yok - sadece jQuery'yi öğrenmeye çalışıyorum.
var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";
DÜZENLEME: seçilen cevap ihtiyacım olana yakındı. Bu benim işime yaradı:
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Ama her iki cevap da beni nihai çözümüme götürdü...
Bir tane ekleyin ve seçin" ile tam olarak ne kastettiğinizden emin değilim, çünkü zaten varsayılan olarak seçilecektir. Ancak, birden fazla ekleyecek olsaydınız, daha mantıklı olurdu. Şöyle bir şeye ne dersiniz?
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
"EDIT"'e yanıt: Bu seçim kutusu bir dizi radyo düğmesi ile doldurulur" ile ne demek istediğinizi açıklayabilir misiniz? Bir <select>
öğesi (yasal olarak) <input type="radio">
öğelerini içeremez.
Aldığım cevaplar sayesinde ihtiyaçlarıma uygun aşağıdaki gibi bir şey oluşturabildim. Sorum biraz muğlaktı. Takip ettiğiniz için teşekkürler. Son sorunum seçili olmasını istediğim seçeneğe "selected" ekleyerek çözüldü.
$(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>