Comment utiliser JQuery pour accéder à toutes les listes déroulantes d'une classe spécifique et faire une boucle dans celles-ci?

Question

Avoir une collection potentiellement infinie de listes déroulantes, en leur donnant tous la même classe, besoin d'être en mesure d'accéder, en boucle et collecter la valeur sélectionnée sur l'option de tous les déroulants indépendamment du nombre qu'il pourrait y avoir. La forme finale devrait être quelque chose comme 5,6,7,6,4,2,3,4,3,4 comme une liste délimitée par des virgules des valeurs sélectionnées de toutes les listes déroulantes.

Answer 1

var ids = $("select.classname > option:selected").map(function(n, i) { 
    return $(n).val(); 
}).join(","); 

Pour expliquer ce que fait, avec

1. Tout d'abord, il sélectionne toutes les options sélectionnées dans les menus déroulants données (identifiés par « classname »);
2. Il passe chaque option sélectionnée à une fonction de rappel;
3. Cette fonction de rappel renvoie la valeur de l'option sélectionnée; Parce que vous avez appelé map sur la matrice d'options sélectionnées, vous avez maintenant un tableau de valeurs utilisant la méthode map();
4. La fonction join() transforme ce tableau en une liste délimitée par des virgules.

Par exemple:

<select class="classname"> 
    <option value="1">One</option> 
    <option value="2" selected>Two</option> 
    <option value="3" selected>Three</option> 
</select> 
<select class="classname"> 
    <option value="4">Four</option> 
    <option value="5" selected>Five</option> 
</select> 

premier utilise $() pour construire un objet jQuery des options sélectionnées (2, 3 et 5), des cartes de la valeur des attributs dans un tableau de {2,3,5} puis les rejoint en une chaîne délimitée par des virgules "2,3,5".

Answer 2

Il semble que la réponse présentée par Cletus ait deux problèmes à résoudre pour ma version de jQuery (1.6.2). Le code ci-dessous a fonctionné correctement pour moi et alerte "3,5" quand il est utilisé contre l'exemple de HTML dans le post de Cletus. Notez qu'il trouve la dernière option sélectionnée et non les deux options sélectionnées dans le premier bloc de sélection HTML. Tout d'abord, il utilisait un mauvais argument dans le rappel de la fonction de la carte. Je avais besoin de changer le n à i: return $(n).val() vs return $(i).val()

En second lieu, il retournait un objet jQuery qui devait être transformé en un tableau avant que la méthode du tableau « rejoindre » pourrait être utilisé: .toArray().join(",")

Une fois que ces 2 modifications mineures ont été faites, la réponse de Cletus a parfaitement fonctionné pour moi dans jQuery 1.6.2