1

Estoy tratando de obtener con jQuery el listado de valores de "options" que tiene un selector. Me gustaría hacerlo en una sola línea.

Tengo aquí un ejemplo:

function myFunction() {
  var array_opciones = [];
  var opciones = $('#miselect').children();
  for (i=0;i<opciones.length;i++) {
    array_opciones.push(opciones[i].value);
  }
  console.log(array_opciones);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

<form>
  <select id="miselect" size="4">
    <option value='Manzana'>Apple</option>
    <option value='Naranja'>Orange</option>
    <option value='Piña'>Pineapple</option>
    <option value='Platano'>Banana</option>
  </select>
</form>

<p>Abre la consola de javascript y haz click para ver el resultado</p>

<button onclick="myFunction()">CLICK AQUÍ</button>

<p id="demo"></p>

</body>
</html>

Esto es lo mas limpio que he podido obtener, pero imagino que debe haber alguna forma mejor de obtener los values con jQuery.

2 respuestas 2

2

Lo que tienes hecho no está mal. Pero podrías reducir el número de líneas usando la función each() de JQuery. Esta lo que hace es iterar por cada elemento del conjunto que le pases al selector.

function myFunction() {
  var array_opciones = [];
  var opciones = $('#miselect').children();
  for (i=0;i<opciones.length;i++) {
    array_opciones.push(opciones[i].value);
  }
  console.log(array_opciones);
}

function myFunction2 () {
  $("#miselect option").each(function() {
      console.log($(this).val());
  });
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

<form>
  <select id="miselect" size="4">
    <option value='Manzana'>Apple</option>
    <option value='Naranja'>Orange</option>
    <option value='Piña'>Pineapple</option>
    <option value='Platano'>Banana</option>
  </select>
</form>

<p>Abre la consola de javascript y haz click para ver el resultado</p>

<button onclick="myFunction2()">CLICK AQUÍ</button>

<p id="demo"></p>

</body>
</html>

1

En una sola línea se puede usar map() o $.map():

const values = [...$("#miselect option")].map(e => e.value);

console.log(values);

const values2 = $.map($("#miselect option"), (e) => e.value);

console.log(values2)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="miselect" size="4">
  <option value='Manzana'>Apple</option>
  <option value='Naranja'>Orange</option>
  <option value='Piña'>Pineapple</option>
  <option value='Platano'>Banana</option>
</select>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.