Idiomatique jQuery pour obtenir toutes les options dans une liste en chaîne séparée par des virgules?

Question

Où lb est une zone de liste, txtfield est une zone de texte, ce code prend toutes les valeurs des options, les met dans un tableau et en fait une liste séparée par des virgules:

var arr = []; 
for (var i = 0; i < lb.length; i++) { 
    arr[i] = lb.options[i].value; 
} 
txtfield.value = arr.join(','); 

lb.options.toString() ne fonctionne évidemment pas parce que c'est un tableau d'options (valeur et texte). Je n'ai rien trouvé de plus succint que cela.

Quelle est la méthode jQuery pour cela? J'ai essayé de jouer avec $(lb).each(), mais n'arrive pas à le faire fonctionner de la même manière.

Answer 1

txtfield.value = $(lb.options).map(function() { 
             return this.value; 
            }).get().join(','); 

Ce uses .map() pour créer un objet jQuery en retournant le value de chaque option, puis uses .get() pour extraire le tableau de l'objet.

---

EDIT: Comme@Nick Craver noté dans le commentaire ci-dessous, si vous avez besoin pour obtenir des performances optimales (avec jQuery), il est plus logique d'utiliser the $.map() variation puisque vous avez déjà une collection. See his answer pour plus de détails.

---

EDIT: Pour obtenir de meilleures performances, faites votre boucle for, mais mettre en cache les références aux propriétés. Il makes a difference.

var arr = [], opts = lb.options, len = opts.length; 
for (var i = 0; i < len; i++) { 
    arr[i] = opts[i].value; 
} 
txtfield.value = arr.join(','); 

Answer 2

Ceci est l'équivalent jQuery de votre code. Il y a des solutions plus élégantes, cependant.

var values = []; 

$(lb).children('option').each(function() { 
    values.push($(this).text()); 
}); 

$(txtfield).val(values.join(',')); 

Answer 3

La version jQuery est .map() comme ceci:

var arr = $(lb).find("option").map(function() { return this.value; }).get(); 
txtfield.value = arr.join(','); 

Ou un peu plus vite avec $.map() comme ceci:

var arr = $.map(lb.options, function(o) { return o.value; }); 
txtfield.value = arr.join(','); 

Cependant, les deux sont nettement moins efficace qu'un for boucle, allez avec la version JavaScript que vous avez déjà.

Answer 4

Regardez map() ..

$('#lbID option').map(function() { 
    return $(this).val(); 
}).get().join(','); 

Answer 5

pouvait le faire comme ça, mais je ne suis pas sûr de ce que vous essayez d'atteindre?

$('option', $(lb)).each(function() { arr.push($(this).text()) }); 

Answer 6

Voir la démo ici: Fiddler Demo

vous pouvez obtenir les multiples options sélectionnées Les valeurs de texte avec séparateur.

$('#testID').change(function() { 
 
     var test=$(this).find("option:selected").map(function() { 
 
     return $(this).text(); 
 
    }).get().join('//'); 
 
    alert(test); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="testID" multiple="multiple"> 
 
    <option value="1">test Value1</option> 
 
    <option value="2">test Value2</option> 
 
    <option value="3">test Value3</option> 
 
    <option value="4">test Value4</option> 
 
    <option value="5">test Value5</option> 
 
    <option value="6">test Value6</option> 
 
</select> 
 
<input type="button" value="Get dropdown selected Value" id="select-values"> 
 
    <div id="result"></div>