¿Cómo obtener todas las opciones de un select usando jQuery?


Respuestas:


613

Utilizar:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each () | Documentación de API jQuery


63
Ninguna de las operaciones de JavaScript requiere jQuery. jQuery es una cuestión de elección para simplificar las operaciones JS.
Ruuter

8
también puede hacer: $ ("# opción id"). each (function (name, val) {var opt = val.text;});
kofifus

3
$.mapes mucho más elegante y menos propenso a errores (ver más abajo).
Elliot Cameron

1
$('#id option').map((index, option) => option.value): observe cómo se invierte la firma de devolución de llamada en comparación con la mapfunción JS "vainilla" ( (item, index) =>)
imrok

168

No conozco jQuery, pero sí sé que si obtiene el elemento select, contiene un objeto 'opciones'.

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option

74
+1. No recurra a la magia selectora compleja de jQuery para cosas que ya tienen implementaciones bastante eficientes integradas en el antiguo DOM.
bobince

19
¿Por qué no, @bobince? Si usa principalmente jQuery, es más rápido, tanto con menos código para escribir, y más rápido para no intentar averiguar si debe cambiar a JavaScript normal en esta instancia. Y tu código es más consistente.
Andrew

139

$.map es probablemente la forma más eficiente de hacer esto.

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

Puede agregar opciones de cambio $('#selectBox option:selected')si solo desea las que están seleccionadas.

La primera línea selecciona todas las casillas de verificación y coloca su elemento jQuery en una variable. Luego usamos la .mapfunción de jQuery para aplicar una función a cada uno de los elementos de esa variable; todo lo que estamos haciendo es devolver el valor de cada elemento, ya que eso es todo lo que nos importa. Debido a que los devolvemos dentro de la función de mapa, en realidad genera una matriz de valores tal como se solicitó.


3
Esta es la solución más elegante de la OMI. El mapa es una construcción muy poderosa que se ajusta exactamente a esta situación.
hazerd

1
Realmente me gusta tu solución, es el enfoque que utilicé. Sin embargo, si solo desea los valores seleccionados, es aún más trivial: $('#selectBox').val()devolverá una matriz de los valores seleccionados.
whoisthemachine

Hola, @PCasagrande Tengo un nombre de atributo personalizado 'tipo de datos'. ¿Cómo puedo obtener el valor de esto usando su solución? Lo que estoy haciendo es 'option.data-type', pero esto me está dando NaN. Gracias por adelantado.
Me_developer

Hola, @PCasagrande. Obtuve lo que necesitaba haciendo '$ (opción, esto) .attr ("tipo de datos")'. Pero si tienes algo mejor, házmelo saber. Gracias. :)
Me_developer

Creo que puede hacer 'return option.attr ("data-type");' en el mapa Eso debería darle una matriz de los valores de los tipos de datos.
PCasagrande

74

Algunas respuestas usan each, pero mapes una mejor alternativa aquí en mi humilde opinión:

$("select#example option").map(function() {return $(this).val();}).get();

Hay (al menos) dos mapfunciones en jQuery. La respuesta de Thomas Petersen usa "Utilities / jQuery.map"; esta respuesta usa "Recorrido / mapa" (y, por lo tanto, un código un poco más limpio).

Depende de lo que va a hacer con los valores. Si, digamos, desea devolver los valores de una función, mapes probablemente la mejor alternativa. Pero si va a utilizar los valores directamente, probablemente lo desee each.


44
En realidad, puede usar this.value en lugar de $ (this) .val () aquí. También sería mejor encontrar a los niños en el selector inicial (opción #ejemplo). Sin embargo, es bastante difícil con el get () al final.
Alex Barrett

1
@ Alex Barret: Bueno, es posible resolver este problema sin usar jQuery. Llamar a jQuery con un elemento como argumento simplemente envolverá el elemento en un objeto jQuery (es decir, sin desplazamiento del árbol, es decir, no es tan costoso). Entonces, tal vez como una microoptimización, sí.
cic

mapa FTW. Así es exactamente como debe hacerse. Sin embargo, get () al final parece innecesario (eso devuelve el nodo DOM y val () ya nos da una cadena, así que ...?) Var opts = $ ('# cm_amt option'). Map (function ( ) {return parseInt ($ (this) .val ());});
emitió el

3
@sbeam: "Como el valor de retorno es una matriz envuelta en jQuery, es muy común que get()el objeto devuelto funcione con una matriz básica". - api.jquery.com/map
cic

Me ayudó mucho, quería que el texto no sea el valor, por lo que acaba de cambiar de text()lugar val(). Gracias ! (Te ;->
causé que superaras

52
$('select#id').find('option').each(function() {
    alert($(this).val());
});

1
Este es el ticket, porque me gusta almacenar elementos en caché en variables en init, en lugar de usar el selector.
Doug Beard el

1
También funciona con $ (esto) (que es lo que estaba buscando) por ejemplo,
Hugh Seagraves

16
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

Aunque, la forma CORRECTA es establecer la propiedad DOM del elemento, así:

$("#id option").each(function(){
    $(this).attr('selected', true);
});

44
¿No sería .attr ('selected', 'selected')?
v010dya

16

Esto pondrá los valores de la opción #myselectboxen una matriz limpia y agradable para usted:

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});

Puede acortar esto a:$.map(domelts, elt=> $(elt).val())
Jonno_FTW

11

Puede tomar todos sus "valores seleccionados" por el nombre de las casillas de verificación y presentarlos en una picadura separada por ",".

Una buena manera de hacer esto es usar jQuery's $ .map ():

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);

66
este código es bastante ilegible, nunca lo usaría, incluso si es genial.
Haga clic en Upvote

77
También la pregunta es sobre selecty optionno casillas de verificación.
Demencia el


3

Puede usar el siguiente código para eso:

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.push(this.value);
});

2

Para la opción de selección múltiple:

$('#test').val()Devuelve la lista de valores seleccionados. $('#test option').lengthdevuelve el número total de opciones (tanto seleccionadas como no seleccionadas)


1

Este es un script simple con jQuery:

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

1

Aquí hay un ejemplo simple en jquery para obtener todos los valores, textos o valores del elemento seleccionado, o el texto del elemento seleccionado.

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})

printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />


0
$("input[type=checkbox][checked]").serializeArray();

O:

$(".some_class[type=checkbox][checked]").serializeArray();

Para ver los resultados:

alert($("input[type=checkbox][checked]").serializeArray().toSource());

0

Si está buscando todas las opciones con texto seleccionado, el código siguiente funcionará.

$('#test').find("select option:contains('B')").filter(":selected");

0

El camino corto

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

o

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}
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.