¿Cómo obtener múltiples valores de cuadro de selección usando jQuery?


155

¿Cómo obtener múltiples valores de cuadro de selección usando jQuery?

Respuestas:



291

El uso de la .val()función en una lista de selección múltiple devolverá una matriz de los valores seleccionados:

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

y en tu 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
¿Qué pasa si quieres obtener en Text 1lugar de valor? reemplazar .val()con .text()?
Raza Ahmed

9
Vale la pena señalar que una selección múltiple sin nada seleccionado devuelve en nulllugar de una matriz vacía. Esto significa que si está agregando programáticamente un valor seleccionado, tiene que hacer algunos malabarismos para hacerlo bien.
Leo

¡Gracias! Hay tantas maneras de obtener un valor de un elemento con jQuery que inevitablemente es difícil encontrar la forma que estás buscando.
Charles Wood

55
@Leo puede agregar un coalesc para evitar el problema nulo, por ejemplo, var selectedValues = $('#multipleSelect').val() || []; también vale la pena señalar que devuelve una serie de cadenas. Me estaba comparando con un número entero y no obtenía coincidencias, así que agregué a .toString().
tkerwood

16

También puede usar la función de mapa js:

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

Y luego puede obtener cualquier propiedad del optionelemento:

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

2
gran respuesta, pero no es necesario pagar el gasto adicional de envolver elcomo un objeto jQuery para cada opción. Simplemente salga directamente del DOM cuando no sea demasiado extraño. Podrías cambiar $(el).val()a justo el.value. Por supuesto, si está acostumbrado a jQuery o desea obtener datos o atributos como sus otros ejemplos, jQuery no está haciendo daño a nadie.
KyleMit

1
@KyleMit Gran consejo. Solo utilicé este enfoque para obtener una colección de valores de campo ocultos y funcionó perfectamente.
EvilDr

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

Otro enfoque más para este problema. La matriz seleccionada tendrá los índices como valores de opción y cada elemento de la matriz tendrá el texto como su valor.

por ejemplo

<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 se seleccionan las opciones 1 y 2.

la matriz seleccionada será:

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

5

Solo por una línea

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

Salida: ["texto1", "texto2"]

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

Salida: ["valor1", "valor2"]

Si usa .join ()

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

Salida: texto1, texto2, texto3


4

Código 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>   

Código JQuery:

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

});

Espero que funcione


13
No "espere que funcione", si no está seguro de si es la respuesta, ¡pruébelo y asegúrese!
Sterling Archer

66
Si no está seguro de la respuesta, ¡no la publique! no estamos aqui por esperanzas .. !! LOL
Clain Dsilva

3
Hey hombre. Funciona perfectamente Echale un vistazo. Deberías esperarlo. No des comentarios irrelevantes ..
Prabhagaran

2
Este es un uso ineficiente de jQuery. Mejor es el enfoque de prefacio con un selector de ID como este: $('#multiple').find(':selected')@Prabhagaran
cannot_mutably_borrow

@YounisShah difícilmente diría que es "ineficiente" ya que la diferencia horaria es la relatividad nada ...
NorCalKnockOut

0

Obtener valores seleccionados en el separador de coma

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

Solo usa esto

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.