Usando il core jQuery, come si fa a rimuovere tutte le opzioni di una select box, poi aggiungere un'opzione e selezionarla?
La mia select box è la seguente.
<Select id="mySelect" size="9"> </Select>
EDIT: Il seguente codice è stato utile per il concatenamento. Tuttavia, (in Internet Explorer) .val('qualunque')
non ha selezionato l'opzione aggiunta. (Ho usato lo stesso 'valore' sia in .append
che in .val
).
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT: Cercando di fargli imitare questo codice, uso il seguente codice ogni volta che la pagina/forma viene resettata. Questa select box è popolata da una serie di pulsanti radio. .focus()
era più vicino, ma l'opzione non appare selezionata come fa con .selected= "true"
. Non c'è niente di sbagliato nel mio codice esistente - sto solo cercando di imparare 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: la risposta selezionata era vicina a ciò di cui avevo bisogno. Questo ha funzionato per me:
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Ma entrambe le risposte mi hanno portato alla mia soluzione finale.
Non sono sicuro di cosa intendiate esattamente con "aggiungerne uno e selezionarlo", dato che sarà comunque selezionato di default. Ma, se dovessi aggiungerne più di uno, avrebbe più senso. Che ne dici di qualcosa come:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Risposta a "EDIT": Puoi chiarire cosa intendi con "Questa select box è popolata da un insieme di pulsanti radio"? Un elemento <select>
non può (legalmente) contenere elementi <input type="radio">
.
Grazie alle risposte che ho ricevuto, sono stato in grado di creare qualcosa come il seguente, che si adatta alle mie esigenze. La mia domanda era un po' ambigua. Grazie per avermi seguito. Il mio problema finale è stato risolto includendo "selected" nell'opzione che volevo selezionare.
$(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>