2010-07-14 46 views

Respuesta

124

jQuery .val()

var foo = $('#multiple').val(); 
+59

Es curioso mirar atrás en estas viejas preguntas y ver la respuesta incorrecta tantas veces. Claramente esto no está obteniendo los 'valores' como el OP estaba pidiendo como la respuesta 'correcta' a continuación. – Tomas

+7

IDEs como PyCharm ahora están retomando el uso de este modo, mostrando advertencias tales como 'Inefficient JQuery Usage', que es lo que me llevó a desplazarme más allá de esta respuesta. : o) –

+0

No es necesario volver a crear un objeto JQuery dentro de la función, eso no tiene sentido porque puede usar javascript puro. Simplemente haga 'foo [i] = selected.value;' –

263

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

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

y en su 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

lo que si quieres conseguir '1' texto en lugar del valor? reemplace '.val()' con '.text()'? –

+8

Merece la pena señalar que una selección múltiple con nada seleccionado devuelve 'null' en lugar de una matriz vacía. Esto significa que si programáticamente ingresas un valor seleccionado, tienes que hacer un poco de malabarismo para hacerlo bien. – Leo

+0

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

8

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

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

Y entonces se puede obtener cualquier propiedad del elemento option:

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

excelente respuesta, pero no es necesario pagar el gasto extra de envolver 'el' como un objeto jQuery para cada opción. Simplemente vete directamente del DOM cuando no sea demasiado extraño. Puedes cambiar '$ (el) .val()' a solo 'el.value'. Por supuesto, si está acostumbrado a jQuery o desea obtener datos o atributos como los otros ejemplos, jQuery no está perjudicando a nadie. – KyleMit

+1

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

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

Sin embargo, otro approch a este problema. La matriz seleccionada tendrá los índices como los valores de la 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 la opción 1 y 2 decir que se seleccionan.

la matriz seleccionada será:

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

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()); 

}); 

esperar que funcione

+7

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

+4

¡Si no está seguro de la respuesta, entonces no la publique ...! no estamos aquí por las esperanzas .. !! LOL –

+2

Hola, hombre. Funciona perfectamente Echale un vistazo. Deberías esperarlo. No dé un comentario irrelevante. – Prabhagaran

0

obtener los 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

sólo tiene que utilizar este

$('#multipleSelect').change(function() { 
    var selectedValues = $(this).val(); 
}); 
Cuestiones relacionadas