Question Comment supprimer toutes les options d'une boîte de sélection, puis ajouter une option et la sélectionner avec jQuery?


En utilisant core 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 avec 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: En essayant de l'obtenir pour imiter ce code, j'utilise le code suivant chaque fois que la page / formulaire est réinitialisé. Cette boîte de sélection est remplie par un ensemble de boutons radio. .focus() était plus proche, mais l'option ne semblait pas sélectionnée comme elle le fait avec .selected= "true". Rien ne va pas avec mon code existant - j'essaie juste 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.


876
2017-09-06 20:53


origine


Réponses:


$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

1477
2017-09-06 21:01



$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

616
2017-12-16 21:07



Pourquoi ne pas simplement utiliser javascript?

document.getElementById("selectID").options.length = 0;

102
2017-11-13 19:45



J'ai eu un bug dans IE7 (fonctionne bien dans IE6) où l'utilisation des méthodes jQuery ci-dessus permettrait d'effacer le sélectionner dans le DOM mais pas à l'écran. En utilisant la barre d'outils IE Developer, je pouvais confirmer que sélectionner avait été effacé et avait les nouveaux éléments, mais visuellement le sélectionner encore montré les vieux éléments - même si vous ne pouviez pas les sélectionner.

Le correctif consistait à utiliser les méthodes / propriétés DOM standard (comme le faisait l'original de l'affiche) pour effacer plutôt que jQuery - en utilisant toujours jQuery pour ajouter des options.

$('#mySelect')[0].options.length = 0;

71
2018-01-11 09:22



Si votre objectif est de supprimer toutes les options de la sélection, sauf la première (généralement l'option «Choisissez un élément»), vous pouvez utiliser:

$('#mySelect').find('option:not(:first)').remove();

67
2018-03-27 09:56



$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

23
2018-06-03 20:48



Vous ne savez pas exactement ce que vous entendez par "ajouter un et le sélectionner", car il sera sélectionné par défaut de toute façon. 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 clarifier ce que vous entendez par "Cette boîte de sélection est peuplée d'un ensemble de boutons radio"? Un élément <select> ne peut pas (légalement) contenir des éléments <input type = "radio">.


22
2017-09-08 18:51



$("#control").html("<option selected=\"selected\">The Option...</option>");

19
2018-03-30 02:30