0

El código del html (solo la parte del select)

<form class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                <select class="form-select shadow-sm " id="select">
                    <option selected> Filter by Region</option>
                    <option value="africa" class="africa">Africa</option>
                    <option value="america" class="america">America</option>
                    <option value="asia" class="asia">Asia</option>
                    <option value="europa" class="europa">Europa</option>
                    <option value="oceania" class="oceania">Oceania</option>
                </select>
            </form>

Con javascript intenté conseguir ya sea el value o el texto, sin embargo solo me da el selected, que en este caso (como se ve en el código de HTML), es "Filter by Region", y si selecciono otra opción, no se modifica la opción. Y esta es la parte que intento conseguir el value con js:

const select = document.getElementById('select');


const value = select.value;
const text = select.options[select.selectedIndex].innerText
console.log(value);
console.log(text);

1 respuesta 1

1

Modifica tu javascript por esto:

const select = document.getElementById('select');
select.addEventListener('change', function() {
  console.log(this.options[this.selectedIndex].value)
  console.log(this.options[this.selectedIndex].innerText)
})

De este modo pones a la escucha al elemento select por si se produce un evento change mediante la función addEventListener, y si se produce entonces se ejecuta la función que lleva integrada, que en este caso muestra por consola los valores que esperas ver.

Aquí te dejo un snippet para que lo veas:

const select = document.getElementById('select');
select.addEventListener('change', function() {
  console.log(this.options[this.selectedIndex].value)
  console.log(this.options[this.selectedIndex].innerText)
})
<form class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
  <select class="form-select shadow-sm " id="select">
    <option selected> Filter by Region</option>
    <option value="africa" class="africa">Africa</option>
    <option value="america" class="america">America</option>
    <option value="asia" class="asia">Asia</option>
    <option value="europa" class="europa">Europa</option>
    <option value="oceania" class="oceania">Oceania</option>
  </select>
</form>

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.