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 en realidad necesito construir las opciones usando mi funcionalidad de PHP. Creo que es porque lo devuelvo como cadena de texto. No muy seguro.
¿Que me estoy perdiendo aqui?
append inserta DOMString s como nodos de texto , lo que hace que HTML se escape. En su lugar, debería asignar myoptions al HTML interno de la innerHTML :
(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; } })();¿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);