原生JS AJAX返回结果后替换select选项仅首次生效问题咨询

问题点 #

• 变量名不匹配：fetch返回值赋值给了res，但后续逻辑使用的是未定义的results，会抛出引用错误，导致逻辑异常。若你实际运行代码已经修正了变量名，那以下问题是累加现象的根源：
• 清空逻辑不覆盖所有子节点：myselectr.options.length = 0仅会移除<select>下的<option>元素，如果你直接用append()传入HTML字符串，字符串会被当做文本节点插入，这些节点不会被上述清空逻辑识别，多次请求就会不断累加。
• 插入方式错误：append()接收字符串时不会解析为DOM元素，无法生成可交互的下拉选项，不符合你的需求。

修复后代码 #

HTML #

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

JavaScript #

(async () => {
    // 你之前的其他逻辑
    const res = await fetch(url, {
        method: "POST",
        headers,
        body
    });

    if (res.ok) {                                
        const myoptions = await res.text();
        const myselectr = document.querySelector("#mySelector");
        // 直接清空所有子内容，覆盖所有节点类型
        myselectr.innerHTML = '';
        // 自动解析HTML字符串为DOM元素
        myselectr.innerHTML = myoptions;

        // 如果需要规避XSS风险，可替换为DOM片段插入方案（需保证返回内容符合安全要求）
        // const fragment = document.createRange().createContextualFragment(myoptions);
        // myselectr.append(fragment);
    }
})();

补充建议 #

• 若接口返回的是JSON格式的选项数据，优先遍历JSON生成option元素再插入，不要直接拼接HTML字符串，降低XSS风险。
• 短时间内多次触发请求时建议增加防抖逻辑，避免异步请求时序错乱导致选项渲染错误。

内容的提问来源于stack exchange，提问作者santa