Las opciones devueltas no aparecen por selector

1

Estoy escribiendo una función en JavaScript simple donde envío algunos valores a través de AJAX y si devuelve resultados. Lo que se devuelve es una cadena con nuevas opciones para un selector. Necesito eliminar todas las opciones de un selector y reemplazarlas con el conjunto que se devuelve.

HTML

<select id="mySelector">
....
</select>

JS

(async () => {
    ....
    const res = await fetch(url, {
        method: "POST",
        headers,
        body
    });

    if (results.ok) {                                
        let myoptions = await results.text();
        var myselectr = document.querySelector("#mySelector");
        myselectr.innerHTML = "";                     
        myselectr.append(myoptions);
    }
})();

Parece devolver opciones y las veo agregadas en DOM, pero el selector no parece verlas como opciones. La cosa es que realmente necesito construir las opciones usando mi funcionalidad PHP. Creo que es porque lo devuelvo como cadena de texto. No muy seguro.

¿Que me estoy perdiendo aqui?

1
  • Cuando hago clic en el selector para expandir, parece que no tiene opciones y cuando inspecciono el código fuente en el navegador, las opciones se ven atenuadas.
    santa
    14 de oct a las 0:27
3

appendinserta los DOMStrings como nodos de texto , lo que hace que HTML se escape. Debería estar asignando myoptionsa la selección en su innerHTMLlugar:

(async () => {
    ....
    const res = await fetch(url, {
        method: "POST",
        headers,
        body
    });

    if (results.ok) {                                
        let myoptions = await results.text();
        var myselectr = document.querySelector("#mySelector");
        myselectr.innerHTML = myoptions;                     

    }
})();
1
  • 1
    Bang, ¡tenemos un ganador! Gracias amigo.
    santa
    14 de oct a las 0:32
0

¿Cuál es el formato de retorno después de realizar la solicitud? ¿Es una matriz? Si es una matriz, agregue las opciones manualmente usando un bucle for.

var myselectr = document.querySelector("#mySelector");
var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
myselectr.append(option);