2

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

3

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
    Commented el 16 nov. 2022 a las 11:13
2

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>

2

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

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.