Używając rdzenia jQuery, jak usunąć wszystkie opcje pola wyboru, a następnie dodać jedną opcję i wybrać ją?
Moje pole wyboru jest następujące.
<Select id="mySelect" size="9"> </Select>
EDIT: Poniższy kod był pomocny przy tworzeniu łańcucha. Jednakże, (w Internet Explorer) .val('whatever')
nie wybrał opcji, która została dodana. (Używałem tej samej 'wartości' zarówno w .append
jak i .val
).
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDYTOWAĆ: Próbując uzyskać to, aby naśladować ten kod, używam następującego kodu za każdym razem, gdy strona / formularz jest resetowany. To pole wyboru jest zaludnione przez zestaw przycisków radiowych. .focus()
był bliżej, ale opcja nie pojawiła się wybrana, jak to się dzieje z .selected= "true"
. Nic nie jest nie tak z moim istniejącym kodem - po prostu próbuję nauczyć się 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: wybrana odpowiedź była bliska temu, czego potrzebowałem. To zadziałało dla mnie:
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Ale obie odpowiedzi doprowadziły mnie do mojego ostatecznego rozwiązania...
Nie jestem pewien, co dokładnie masz na myśli mówiąc "dodaj jeden i wybierz go", ponieważ i tak zostanie on domyślnie wybrany. Ale jeśli miałbyś dodać więcej niż jeden, miałoby to więcej sensu. Co powiesz na coś w stylu:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Response to "EDIT": Czy możesz wyjaśnić, co masz na myśli mówiąc "To pole wyboru jest wypełnione zestawem przycisków radiowych"? Element <select>
nie może (legalnie) zawierać elementów <input type="radio">
.
Dzięki odpowiedziom, które otrzymałem, udało mi się stworzyć coś takiego jak poniżej, co odpowiada moim potrzebom. Moje pytanie było nieco niejednoznaczne. Dziękuję za śledzenie. Mój ostateczny problem został rozwiązany przez włączenie "selected" do opcji, którą chciałem wybrać.
$(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>