Comment obtenir plusieurs valeurs de boîte de sélection à l'aide de jQuery?


155

Comment obtenir plusieurs valeurs de boîte de sélection à l'aide de jQuery?

Réponses:



291

L'utilisation de la .val()fonction sur une liste à sélection multiple renverra un tableau des valeurs sélectionnées:

var selectedValues = $('#multipleSelect').val();

et dans votre html:

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
et si vous voulez obtenir Text 1au lieu de valeur? remplacer .val()par .text()?
Raza Ahmed

9
Il convient de noter qu'une sélection multiple sans aucun élément sélectionné renvoie nullplutôt qu'un tableau vide. Cela signifie que si vous ajoutez par programme une valeur sélectionnée, vous avez un peu de jonglerie à faire pour bien faire les choses.
Leo

Je vous remercie! Il y a tellement de façons d'obtenir une valeur d'un élément avec jQuery qu'il est inévitablement difficile de trouver le chemin que vous recherchez.
Charles Wood

5
@Leo, vous pouvez ajouter un coalesc pour contourner le problème nul. var selectedValues = $('#multipleSelect').val() || []; Par exemple, il convient de noter qu'il renvoie un tableau de chaînes. Je comparais à un entier et n'obtenais aucune correspondance, alors j'ai ajouté un fichier .toString().
tkerwood

16

Vous pouvez également utiliser la fonction de carte js:

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

Et puis vous pouvez obtenir n'importe quelle propriété de l' optionélément:

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
excellente réponse, mais pas besoin de payer les frais supplémentaires liés à l'emballage en eltant qu'objet jQuery pour chaque option. Sortez directement du DOM quand ce n'est pas trop bizarre. Vous pourriez changer $(el).val()pour juste el.value. Bien sûr, si vous êtes habitué à jQuery ou que vous souhaitez récupérer des données ou des attributs comme vos autres exemples, jQuery ne fait de mal à personne.
KyleMit

1
@KyleMit Bonne astuce. Je viens d'utiliser cette approche pour saisir une collection de valeurs de champ cachées et cela a parfaitement fonctionné.
EvilDr

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

Encore une autre approche à ce problème. Le tableau sélectionné aura les index comme valeurs d'option et chaque élément du tableau aura le texte comme valeur.

par exemple

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

si les options 1 et 2 sont sélectionnées.

le tableau sélectionné sera:

selected['abc']=1; 
selected['def']=2.

5

Juste par une ligne-

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

Sortie: ["text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

Sortie: ["valeur1", "valeur2"]

Si vous utilisez .join ()

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

Sortie: texte1, texte2, texte3


4

Code HTML:

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

Code JQuery:

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

Esperons que ça marche


14
N'espérez pas que ça marche, si vous n'êtes pas sûr que ce soit la réponse, testez-la et soyez sûr!
Sterling Archer

6
Si vous n'êtes pas sûr de la réponse, ne la postez pas .. !! nous ne sommes pas là pour espérer .. !! LOL
Clain Dsilva

3
Hé mec. Cela fonctionne parfaitement. Vérifiez-le. Vous devriez l'espérer. Don't give irrelevent comment ..
Prabhagaran

2
Il s'agit d'une utilisation inefficace de jQuery. Mieux vaut l'approche est de faire $('#multiple').find(':selected')précéder un sélecteur d'identifiant comme celui-ci: @Prabhagaran
cannot_mutably_borrow

@YounisShah Je dirais à peine que c'est "inefficace" car le décalage horaire n'est rien de relativité ...
NorCalKnockOut

0

Obtenir les valeurs sélectionnées dans le séparateur par virgule

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

0

Utilisez simplement ceci

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.