0

Tengo un select como este:

<select>
    <option value="light">
        <p id="p1">Claro</p>
    </option>
    <option value="dark">
        <p id="p2">Oscuro</p>
    </option>
</select>

Y un array con elementos como este:

const messages = ["Light", "Dark"];

Lo que pasa es que intento cambiar el innerHTML a los elementos p dentro de los option por cierto elemento del array:

document.getElementById("p1").innerHTML = messages[0];
document.getElementById("p2").innerHTML = messages[1];

Todo bien con el array. El problema es que no me cambia el texto, y en la consola dice: null is not an object, lo que quiere decir que no encontró mi elemento dentro del option. No es error de carga del JavaScript, ya que tengo la costumbre de cargar JavaScript al final del body.

¿Alguien sabe cómo arreglar esto o al menos cómo cambiar un tramo de texto de un option en JavaScript?

Gracias de antemano y espero que me puedas ayudar. ¡Ten un lindo día (o noche)!

1
  • 2
    Los options no deben tener ningun elemento dentro mas que texto, busca otra forma de hacer lo que necesitas, algun plugin, select2 puede servirte el 7 sep. 2021 a las 3:49

1 respuesta 1

2

No intente cambiarlo uno por uno los option del select. Mejor capture el select y en una variable guarde el html que necesita cambiar o modificar de la siguiente manera:

let messages = ["Light", "Dark"];

let opciones=document.querySelector("#selector"); 

let elhtml=`<option value="light"><p>${messages[0]}</p></option>
                    <option value="dark"><p>${messages[1]}</p></option>`;
                    
opciones.innerHTML=elhtml;
<select id="selector">
        <option value="light"><p>Claro</p></option>
        <option value="dark"><p>Oscuro</p></option>
    </select>

1
  • ¡Muchísimas gracias! Intenté hacer algo muy similar y ya se reemplaza. ¡Ten un lindo día! :D el 7 sep. 2021 a las 14:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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