Si te das cuenta estás creando un solo elemento option
, en la 4ª línea y el forEach hace referencia a ese mismo elemento en cada iteración. Es por eso que prevalece el último elemento de la iteración.
La solución es mover esa línea de código dentro de la función lambda y el appendChild()
también ya que sino agregarías una sola opción. Así:
function consultarEdad() {
fetch('http://localhost:3500/edadesMascotas')
.then(response => response.json())
.then(data =>
// Lo que se encuentra aquí no se repite. Por lo que no es el lugar ideal
// para llevar a cabo la creación de las opciones.
// El forEach funciona como un ciclo, es decir,
data.forEach(element => {
// lo que está en este bloque se repite
var option = document.createElement('option')
option.innerHTML = `${element.edad}`
container.appendChild(option)
// Aquí es el lugar para seguir configurando tus objetos option
option.addEventListener('click', () => { console.log(option.value) })
})
// El bloque llegó a su fin, lo que escribas aquí tampoco se repetirá
);
}
Te prongo una alternativa a asignar un EventListener
"click" para cada opción como me lo sugeriste en los comentarios.
El evento "click" no es el único que existe. Hay uno llamado "change" que puedes aplicar al select
. Y es así como con un solo evento solucionas el problema:
container.addEventListener("change", () => console.log(container.value))
o si lo que quieres es saber el índice de la opción seleccionada:
container.addEventListener("change", () => console.log(container.selectedIndex))