实现双下拉列表均选选项后启用submit按钮的问题排查

先梳理你代码里的几个核心问题：

• 元素ID匹配错误：JS里获取下拉框时用了错误的ID（dropdown），但HTML里的下拉框ID是dropdown1和dropdown2，导致无法正确获取目标元素。
• 事件监听不完整：仅给第一个下拉框添加了事件监听，修改第二个下拉框时，按钮状态不会同步更新。
• 逻辑判断错误：误用赋值运算符=代替比较运算符，且逻辑逻辑——应该是任一下拉框未选中有效选项时禁用按钮，而非错误的赋值判断。
• 初始状态未同步：页面加载时两个下拉框默认选中第一个选项，但按钮初始为禁用状态，需要初始化时主动检查并更新按钮状态。

修正后的完整代码 #

HTML 部分

<form>
  <select id="dropdown1">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select id="dropdown2">
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <input type="submit" id="btn" disabled>
</form>

JavaScript 部分

// 正确获取对应ID的下拉框和按钮元素
const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");
const submitbutton = document.getElementById("btn");

// 封装状态检查函数，避免重复代码
function checkSubmitStatus() {
  // 逻辑：任一下拉框值为空时禁用按钮，否则启用
  submitbutton.disabled = dropdown1.value === "" || dropdown2.value === "";
}

// 给两个下拉框都添加事件监听，触发状态检查
dropdown1.addEventListener("input", checkSubmitStatus);
dropdown2.addEventListener("input", checkSubmitStatus);

// 页面加载完成后，初始化检查一次按钮状态
checkSubmitStatus();

可选优化：添加默认提示选项 #

如果需要让用户必须主动选择选项（而非默认选中第一个），可以给每个下拉框添加空值的提示选项，示例：

<select id="dropdown1">
  <option value="">请选择分类</option>
  <option>ABC</option>
  <option>DEF</option>
  <option>GHI</option>
</select>

此时初始状态下按钮会保持禁用，直到用户选中两个有效选项。

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