En utilisant le noyau jQuery, comment supprimer toutes les options d'une boîte de sélection, puis ajouter une option et la sélectionner ?
Ma boîte de sélection est la suivante.
<Select id="mySelect" size="9"> </Select>
EDIT : Le code suivant a été utile pour le chaînage. Cependant, (dans Internet Explorer) .val('whatever' ;)
n'a pas sélectionné l'option qui a été ajoutée. (J'ai utilisé la même 'valeur' ; dans les deux .append
et .val
).
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT : Pour essayer d'imiter ce code, j'utilise le code suivant à chaque fois que la page/le formulaire est réinitialisé. Cette boîte de sélection est remplie par un ensemble de boutons radio. .focus()
est plus proche, mais l'option n'apparaît pas sélectionnée comme elle le fait avec .selected= "true"
. Je n'ai rien à reprocher à mon code existant - j'essaie simplement d'apprendre 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 réponse sélectionnée était proche de ce dont j'avais besoin. Cela a fonctionné pour moi :
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Mais les deux réponses m'ont conduit à ma solution finale...
Je ne sais pas exactement ce que vous voulez dire par "en ajouter un et le sélectionner", puisqu'il sera de toute façon sélectionné par défaut. Mais, si vous deviez en ajouter plus d'un, cela aurait plus de sens. Que diriez-vous de quelque chose comme :
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Réponse à "EDIT " : Pouvez-vous préciser ce que vous entendez par "Cette boîte de sélection est remplie par un ensemble de boutons radio" ? Un élément <select>
ne peut pas (légalement) contenir d'éléments <input type="radio">
.
Grâce aux réponses que j'ai reçues, j'ai pu créer quelque chose comme ce qui suit, qui répond à mes besoins. Ma question était quelque peu ambiguë. Merci pour le suivi. Mon dernier problème a été résolu en incluant "selected" dans l'option que je voulais sélectionner.
$(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>