Comment changer la valeur d'une liste défilante en jQuery ?

Il peut s'avérer fastidieux de changer la valeur d'une liste déroulante. JQuery possède une méthode qui facilite la gestion de ces éléments.

Les listes déroulantes sont constituées d'une balise <select> qui encadre une ou plusieurs <option>, avec parfois des balises <optgroup> qui permettent de regrouper entre elles des options. Une liste déroulante retourne la valeur de l'option sélectionnée, cette dernière possédant l'attribut selected avec comme valeur selected (à lire aussi: Comment vérifier qu'une option est sélectionnée dans un menu avec JQuery, et si ce n'est pas le cas lui attribuer une option par défaut ?). Exemple de liste déroulante :

<select id=maListe>
 <option value=1>Option A</option>
 <option value=2 selected=selected>Option B</option>
 <option value=3>Option C</option>
</select>

Il peut donc s'avérer fastidieux de changer la valeur d'une liste déroulante. JQuery possède la méthode val() qui facilite grandement la gestion de ces éléments. Utilisée sans paramètre, celle-ci retourne la valeur actuelle de l'élément. Avec un paramètre, on peut modifier cette valeur. Cette méthode fonctionne aussi bien avec un champ texte qu'avec une liste déroulante, des cases à cocher ou encore des boutons radio et permet donc dans le cas des listes déroulantes de sélectionner l'option qui a la valeur correspondante :

$(#maListe).val(2); //Sélectionne l'option qui a comme valeur 2 pour la liste déroulante.

JQuery