1

Tengo en un form un SELECT con el atributo MULTIPLE, y necesito traer los valores a Javascript.

<select name="cars" id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Con .value solo trae el primer valor

3 respuestas 3

2

La propiedad indicada para estos casos es selectedOptions.

Contiene una lista de los elementos <option> contenidos dentro del elemento <select> que están actualmente seleccionados.

window.addEventListener("DOMContentLoaded", () => {
  const el = document.getElementById("cars");
  el.addEventListener("click", () => {
      let seleccionados = document.getElementById('cars').selectedOptions;      
      for(let i = 0;  i < seleccionados.length; i++){
          console.log(seleccionados[i].value);
      }
  });
});
<select name="cars" id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

1
  • 1
    A no olvidar que la documentación es siempre una buena amiga :)
    – padaleiana
    el 16 nov. 2022 a las 11:13
1

Prueba con esto, donde recorremos los option del select y si está seleccionado lo mostramos en consola:

function muestraSeleccion() {
  select = document.getElementById('cars');
  for (var i = 0; i < select.options.length; i++) {
    o = select.options[i];
    if (o.selected == true) {
      console.log(o.value)
    }
  }
}
<select name="cars" id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button id="muestra_seleccion" onclick="muestraSeleccion()">Ver selección en consola</button>

1

También he encontrado esta solución usando el Spread syntax (...) y map

function ejecutar(){
    const el = document.getElementById("cars");
    const seleccionados = [...el.selectedOptions].map(o=>o.value);
}
document.getElementById("enviar").addEventListener('click', ejecutar, false);

HTML:

<select name="cars" id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="button" id="enviar">Enviar</button>

Pero no sé si esto es mejor

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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