如何用JavaScript根据前序选择框值设置结果文本框的值？

问题分析与修复 #

你的代码存在几个关键问题导致无法正常运行，以下是修正后的完整代码及问题说明：

修复后的JavaScript代码

function result_method() {
    const bwMethod = document.getElementById("bw_method");
    const wMethod = document.getElementById("w_method");
    const resultMethod = document.getElementById("result_method");

    // 判断两个选择框的值是否同时为"Accepted"
    if (bwMethod.value === "Accepted" && wMethod.value === "Accepted") {
        resultMethod.value = "Pass";
    } else {
        resultMethod.value = "Fail";
    }
}

修复后的HTML代码

<label> Before Wash </label>
<select name="bw_method" id="bw_method" class="form-control" disabled>
    <option selected>PILIH</option>
    <option value="Accepted">Accepted</option>
    <option value="Rejected">Rejected</option> <!-- 修正拼写错误：Rejeceted → Rejected -->
</select>

<label> 1. wash </label>
<select name="w_method" id="w_method" class="form-control" onchange="result_method();">
    <option selected disabled>PILIH</option>
    <option value="Accepted">Accepted</option>
    <option value="Rejected">Rejected</option>
</select>

<label> Result </label>
<input name="result_method" id="result_method" type="text" class="form-control" readonly>

关键修复点说明

• 条件判断逻辑错误：原代码误用赋值运算符=代替比较运算符===，且错误使用isNaN（该方法仅用于判断非数字值，不适合字符串比较）。正确逻辑是用&&判断两个选择框的值是否同时等于"Accepted"。
• 事件绑定错误：<select>元素的选择操作不会触发onkeyup事件，应改用onchange事件（选择项变化时触发）。另外第一个选择框为disabled状态，无需绑定事件（也无法触发）。
• 冗余DOM操作：原代码已通过getElementById获取结果文本框元素，后续无需再用document.querySelector重复获取，直接使用变量即可。
• 拼写错误修正：第一个选择框内的Rejeceted修正为Rejected，避免后续取值时出现匹配错误。

内容的提问来源于stack exchange，提问作者Ayu Asri Lestari