JavaScript中select控件始终读取第一个选项值的问题求助

问题场景 #

我制作了一个包含两个选项的简单select控件，HTML代码如下：

<select class="form-control seta-select input-layout max-width-none-i width-100-i" id="campo-relatorio" name="Relatorio" style="background-color: #00000060" onchange="ContaMasterFiltraRelatorio()">
    <option value="Detalhado" selected>Detalhado</option>
    <option value="Consolidado">Consolidado</option>
</select>

对应的JavaScript代码如下：

function ContaMasterFiltraRelatorio() {
    var campo = document.querySelector("#campo-relatorio");
    if (campo.value == "Detalhado") {
        (...)
    }
    else if (campo.value == "Consolidado") {
        (...)
    }
}

调试时发现，无论选择哪个选项，系统始终识别为选中了“Detalhado”选项，代码始终进入第一个if分支。

解决办法 #

1. 排查重复ID元素 #

页面中如果存在多个ID为campo-relatorio的元素，document.querySelector只会返回第一个匹配项，导致你操作的不是当前交互的select控件。打开浏览器开发者工具（F12），搜索#campo-relatorio，确认页面中仅存在一个该ID的元素。

2. 直接传入事件源元素 #

修改HTML的onchange事件，将当前select控件作为参数传入函数，避免DOM查询出错：

onchange="ContaMasterFiltraRelatorio(this)"

同步修改JavaScript函数：

function ContaMasterFiltraRelatorio(campo) {
    if (campo.value === "Detalhado") {
        // 执行Detalhado对应的逻辑
    } else if (campo.value === "Consolidado") {
        // 执行Consolidado对应的逻辑
    }
}

3. 检查是否有代码篡改值 #

查看页面中是否存在其他JavaScript代码，在onchange事件触发后将select的value重置为Detalhado。可以在函数开头添加console.log(campo.value)，实时打印当前选中值，确认值是否在函数执行过程中被修改。

4. 使用严格相等运算符 #

将代码中的==替换为===，避免隐式类型转换导致的判断错误，排除潜在问题。

内容的提问来源于stack exchange，提问作者josé djalma