原生JS动态添加<select>的<option>后选中异常问题求助

你的代码出现选中项异常的核心原因有以下几点：

• 全局option获取错误：使用document.getElementsByTagName("option")会获取页面中所有<option>元素，而非目标<select>内部的选项。比如获取c01_T的selectedIndex时，索引对应的是全局第一个select的option，页面其他select的option会打乱索引逻辑，导致textH/textA取值错误。
• 每次点击强制重置选项：只要点击目标select就会执行refresh函数，重新清空并添加选项，直接覆盖用户之前的选中状态，导致select被强制重置，看起来始终选中第二个选项。
• 变量未声明引发全局污染：x、y、teamSelect等变量未用let/const声明，成为全局变量，容易和其他代码冲突，引发不可预料的问题。
• 选项重置逻辑混乱：teamSelect.options.length = 2后又执行remove(2)、remove(1)，逻辑冗余且错误，会误删初始的"Select Me"选项，导致后续select结构异常。

HTML部分（修改事件绑定，避免每次点击都触发重置） #

<div class="top">
    <select name="c01_T" id="c01_T" class="choice-select">
        <option value="none">Select Me</option>
        <option value="Choice 1">Choice 1</option>
        <option value="Choice 2">Choice 2</option>
    </select>
</div>
<div class="bot">
    <select name="c01_B" id="c01_B" class="choice-select">
        <option value="none">Select Me</option>
        <option value="Choice 3">Choice 3</option>
        <option value="Choice 4">Choice 4</option>
    </select>
</div>
<div class="top">
    <select name="c09_T" id="c09_T" class="choice-select" onfocus="refresh(this.id)">
        <option value="none">Select Me</option>
    </select>
</div>
<div class="bot">
    <select name="c09_B" id="c09_B" class="choice-select" onfocus="refresh(this.id)">
        <option value="none">Select Me</option>
    </select>
</div>

<div class="bot">
    <select name="c13_T" id="c13_T" class="choice-select" onfocus="refresh(this.id)">
        <option value="none">Select Me</option>
    </select>
</div>

JavaScript部分 #

function refresh(id) {
    let textH = null;
    let textA = null;
    // 根据目标ID匹配对应的前置select元素
    switch(id) {
        case "c09_T":
            const c01T = document.getElementById('c01_T');
            textH = c01T.options[c01T.selectedIndex].value;
            const c01B = document.getElementById('c01_B');
            textA = c01B.options[c01B.selectedIndex].value;
            break;
        case "c09_B":
            // 注：原代码中c08_T/c08_B不存在，请根据实际情况修正
            const c08T = document.getElementById('c08_T');
            if(c08T) textH = c08T.options[c08T.selectedIndex].value;
            const c08B = document.getElementById('c08_B');
            if(c08B) textA = c08B.options[c08B.selectedIndex].value;
            break;
        case "c13_T":
            const c09T = document.getElementById('c09_T');
            textH = c09T.options[c09T.selectedIndex].value;
            const c09B = document.getElementById('c09_B');
            textA = c09B.options[c09B.selectedIndex].value;
            break;
        case "c13_B":
            // 注：原代码中c10_T/c10_B不存在，请根据实际情况修正
            const c10T = document.getElementById('c10_T');
            if(c10T) textH = c10T.options[c10T.selectedIndex].value;
            const c10B = document.getElementById('c10_B');
            if(c10B) textA = c10B.options[c10B.selectedIndex].value;
            break;
    }

    const teamSelect = document.getElementById(id);
    // 清空除初始"Select Me"外的所有选项
    while(teamSelect.options.length > 1) {
        teamSelect.remove(1);
    }

    // 前置选项均非空时，添加新选项
    if (textH !== "none" && textA !== "none" && textH && textA) {
        teamSelect.add(new Option(textH, textH));
        teamSelect.add(new Option(textA, textA));
    }
}

• 精准获取目标选项：通过selectElement.options[selectElement.selectedIndex]获取对应select内部的选中选项，避免全局option索引混乱。
• 调整触发时机：将onclick改为onfocus，仅在select获得焦点时更新选项，保留用户的选中状态。
• 规范选项重置逻辑：用while循环删除多余选项，逻辑清晰且不会误删初始默认选项。
• 变量局部化：所有变量用let/const声明为局部变量，避免全局污染。
• 增加存在性校验：对原代码中不存在的select元素增加判断，避免控制台报错。

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