选择器似乎没有返回的选项答案

【问题标题】：Returned options are not seem by selector选择器似乎没有返回的选项
【发布时间】：2021-10-14 00:23:20
【问题描述】：

我正在用纯 Javascript 编写一个函数，我通过 AJAX 提交一些值，如果它返回结果。返回的是一个带有选择器新选项的字符串。我需要从选择器中删除所有选项并将它们替换为返回的集合。

HTML

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

(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);
    }
})();

它似乎返回了选项，我看到它们添加到 DOM 中，但选择器似乎没有将它们视为选项。问题是我实际上需要使用我的 PHP 功能来构建选项。我认为这是因为我将它作为文本字符串返回。不太确定。

我在这里错过了什么？

【问题讨论】：

当点击选择器展开时，它看起来没有选项，当我在浏览器中检查源代码时，选项看起来是灰色的。

标签： javascript php ajax

【解决方案1】：

append 将DOMStrings 插入为Text 节点，导致HTML 被转义。您应该将myoptions 分配给选择的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;                     

    }
})();

【讨论】：

砰——我们赢了！谢谢老兄。

【解决方案2】：

发出请求后的返回格式是什么，它是一个数组。如果它是一个数组，则使用 for 循环手动附加选项。

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

【讨论】：