Idiomatic jQuery para obtener todas las opciones en un cuadro de lista en una cadena separada por comas?

Question

Dónde lb es un cuadro de lista, txtfield es un cuadro de texto, este código se lleva todos los valores de las opciones, los pone en una matriz y lo hace en una lista separada por comas:

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

lb.options.toString() obviamente no funciona porque es una matriz de opciones (valor y texto). No he encontrado nada más sucinto que esto.

¿Cuál es la forma de jQuery para hacer esto? Intenté jugar con $(lb).each(), pero parece que no funciona de la misma manera.

Answer 1

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

Este uses .map() para crear un objeto jQuery devolviendo el value de cada option, entonces uses .get() para extraer de la matriz del objeto.

---

EDIT:@Nick Craver Como se señala en el comentario anterior, si usted necesita para obtener un rendimiento óptimo (con jQuery), tiene más sentido usar the $.map() variation puesto que ya tiene una colección. See his answer para más detalles.

---

EDIT: Para obtener un mejor rendimiento, hacer su bucle for, pero almacena en caché las referencias a las propiedades. Es 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

Este es el jQuery equivalente a su código. Sin embargo, hay soluciones más elegantes.

var values = []; 

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

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

Answer 3

La versión de jQuery es .map() así:

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

O un poco más rápido con $.map() así:

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

Sin embargo, ambos son significativamente menos eficiente que un for loop, ve con la versión de JavaScript que ya tienes.

Answer 4

Mira map() ..

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

Answer 5

Podría hacerlo de esta manera, pero no estoy seguro de lo que estamos tratando de lograr?

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

Answer 6

Ver demostración aquí: Fiddler Demo

puede obtener los valores de texto múltiples opciones seleccionadas con separador.

$('#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>