¿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>
Darin Dimitrov
fuente
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...
kpull1
fuente
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.
Joz Naveen Joz
fuente
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

hardika
fuente
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

Prabhagaran
fuente
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);
Santhosh Rajkumar
fuente
0

Solo usa esto

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Kartik Chauhan
fuente