1
<select name="edades" id="edades">
            <option value="1" >1 años</option>
            <option value="2">2 años</option>
            <option value="3">3 años</option>
            <option value="4">4 años</option>
            <option value="5" selected>5 años</option>
          </select>

me gustaria crear una etiqueta similar a la de aqui arrriba pero desde un archivo js, esta es la funcion que devuelve las edades funciona pero al momento de crear las etiqueta solo me aparece la ultima inserccion es decir que si llega 5 y 7 pero solo me crea la etiqueta con la opcion 7.

<select id="containerEdades" class="containerEdades"></select>
var container = document.getElementById('containerEdades')
function consultarEdad() {
    var option = document.createElement('option')
    fetch('http://localhost:3500/edadesMascotas')
        .then(response => response.json())
        .then(data =>
            data.forEach(element => {
                option.innerHTML = `${element.edad}`
            })
        );
        container.appendChild(option)
}

1 respuesta 1

1

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))
4
  • entiendo pero ahora¿ como obtengo el valor que tienen esas etiquetas ? lo normal que hacia antes era edades.value pero ahora no puedo Commented el 11 jul. 2021 a las 19:41
  • No vi ningún edades.value en el código. Si puedieras agregar la parte en la que lo declaras y usas a la pregunta, vería como editar la respuesta para darte una solución.
    – Mateo
    Commented el 11 jul. 2021 a las 19:52
  • disculpa a lo que me refiero es que como obtengo el valor de este tipo de etiqueta yo haria algo asi option.addEventListener('click', () => { console.log(option.value) }) pero solo obtendre el ultima valor. ¿como seria para obtener cual otro valor?. Commented el 11 jul. 2021 a las 19:59
  • Ahora edito con un poco más de detalle a ver si te queda claro
    – Mateo
    Commented el 11 jul. 2021 a las 20:13

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.