Comment supprimer toutes les options d’une boîte de sélection et ensuite ajouter une option et sélectionnez-le avec jQuery ?

Question

L'aide de base de jQuery, comment voulez-vous supprimer toutes les options d'une zone de sélection, puis ajouter une option et sélectionnez-il?

Ma boîte de sélection est le suivant.

<Select id="mySelect" size="9" </Select>

EDIT: Le code suivant a été utile avec le chaînage. Cependant, (dans Internet Explorer) .val('whatever') ne sélectionnez pas l'option qui a été ajouté. (J'ai fait d'utiliser 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 le rendre à imiter ce code, j'utilise le code suivant à chaque fois que la page/formulaire est réinitialisé. Cette zone est remplie par un ensemble de boutons radio. .focus() a été de plus près, mais l'option n'apparaît pas sélectionné comme il le fait avec .selected= "true". Rien de mal avec mon code existant - je suis juste essayer 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: réponse choisie é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'a conduit à ma solution finale..

Answer 1

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

Answer 2

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

Answer 3

Pourquoi ne pas simplement utiliser javascript simple ?

Answer 4

Si votre but est d’enlever toutes les options de la sélectionner sauf la première (en général l’option « S’il vous plaît choisir un élément »), vous pouvez utiliser :

Answer 5

J'ai eu un bug dans IE7 (fonctionne très bien dans IE6) où à l'aide de ces méthodes jQuery permettrait de le sélectionner dans les DOM, mais pas sur l'écran. À l'aide de l'IE Barre d'outils du Développeur j'ai pu confirmer que l' sélectionnez avait été défriché, et avaient les nouveaux articles, mais visuellement le sélectionner montrait toujours les vieux objets - même si vous ne pouvez pas sélectionner.

La solution était d'utiliser les méthodes du DOM/properites (comme l'affiche originale a) pour effacer plutôt que de jQuery - toujours à l'aide de jQuery pour ajouter des options.

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