¿Cómo obtener todas las opciones de una selección usando jQuery?
¿Cómo puedo obtener todas las opciones de un select a través de jQuery pasando su ID?
Solo busco obtener sus valores, no el texto.
Usar:
$("#id option").each(function()
{
// Add $(this).val() to your list
});
.cada() | Documentación de la API de jQuery
Sin jQuery
, sé que el HTMLSelectElementelemento contiene una optionspropiedad, que es un archivo HTMLOptionsCollection.
const myOpts = document.getElementById('yourselect').options;
console.log(myOpts[0].value) //=> Value of the first option
Una respuesta de 12 años. Modernicémoslo un poco (usando .querySelectorAll, extendiendoHTMLOptionsCollection el resultado Arrayy mapeando los valores).
// helper to retrieve an array of elements using a css selector
const nodes = selector => [...document.querySelectorAll(selector)];
const results = {
pojs: nodes(`#demo option`).map(o => o.value),
jq: $(`#demo option`).toArray().map( o => o.value ),
}
console.log( `pojs: [${results.pojs.slice(0, 5)}]` );
console.log( `jq: [${results.jq.slice(0, 5)}]` );<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="demo">
<option value="Belgium">Belgium</option>
<option value="Botswana">Botswana</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Malaysia">Malaysia</option>
<option value="Mali">Mali</option>
<option value="Namibia">Namibia</option>
<option value="Netherlands">Netherlands</option>
<option value="North Korea">North Korea</option>
<option value="South Korea">South Korea</option>
<option value="Spain">Spain</option>
<option value="Sweden">Sweden</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
$.mapes 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 hacemos es devolver el valor de cada elemento, ya que eso es lo único que nos importa. Debido a que los devolvemos dentro de la función de mapa, en realidad crea una matriz de valores tal como se solicitó.
Algunas respuestas usan each, pero mapaquí es una mejor alternativa 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 "Atravesar/mapa" (y por lo tanto un código un poco más limpio).
Depende de lo que vayas a hacer con los valores. Si, digamos, desea devolver los valores de una función, mapprobablemente sea la mejor alternativa. Pero si va a utilizar los valores directamente, probablemente desee each.
Esto colocará los valores de las opciones #myselectboxen una matriz limpia y agradable para usted:
// First, get the elements into a list
var options = $('#myselectbox option');
// Next, translate that into an array of just the values
var values = $.map(options, e => $(e).val())
