JQuery - Options de sélection multiple

Question

J'essaie de récupérer tous les éléments sélectionnés dans la sélection multiple suivante et de les séparer par une virgule. Le code est le suivant :

<select id="ps-type" name="ps-type" multiple="multiple" size="5">
    <option>Residential - Wall Insulation</option>
    <option>Residential - Attic /Crawl Space Insulation</option>
    <option>Residential - Foundation Insulation</option>
    <option>Residential - Exterior Roof System</option>
    <option>Commercial - Wall Insulation</option>
    <option>Commercial - Air Barrier System (Walltite)</option>
    <option>Commercial - Roof System</option>
</select>

Le résultat que je recherche est le suivant :

Résidentiel - Isolation des murs, Commercial - Isolation des murs, ...

Answer 1

Vous pouvez utiliser le :selected et le sélecteur en ligne $.map() dans le cadre de votre chaîne.

$("option:selected").map(function(){ return this.value }).get().join(", ");

Answer 2

Ajoutez les valeurs dans un tableau et utilisez join pour créer la chaîne de caractères :

var items = [];
$('#ps-type option:selected').each(function(){ items.push($(this).val()); });
var result = items.join(', ');

Answer 3

Sur un élément à sélection multiple, l'élément val de la commande select renvoie un tableau des valeurs des options sélectionnées. Si aucune valeur n'est présente, le texte de l'élément est utilisé :

var output = $("#ps-type").val().join(', ');

mettre à jour : Cependant, lorsqu'il n'y a pas d'options sélectionnées val() renvoie à null et non un tableau vide. Une façon de contourner ce problème :

var output = ($("#ps-type").val() || []).join(', '); 

Vous pouvez jouer avec dans cette démo que j'ai mise en place .

De les docs :

Dans le cas de <select multiple="multiple"> les éléments .val() renvoie un tableau contenant chaque option sélectionnée.

Answer 4

var list = "";
$('#ps-type option:selected').each(function(){
  list += this.value + ", ";
});
return list.substr(0, list.length - 2);

Answer 5

Quelque chose comme ça devrait faire l'affaire :

var result = "";
$('#ps-type option:selected').each(function(i, item){ 
   result += $(this).val() + ", ";
});