如何实现多个select下拉框满足条件时移除按钮disabled属性

我在开发多下拉框表单时遇到以下需求：

• 当所有必填下拉框都选中有效值时，移除按钮的disabled属性
• 选择「TECHNICIAN」（对应值为2）时，subPhase子下拉框变为必填项
• 选择其他类型时，仅需选中phase下拉框即可
• 核心要求：无下级子项的下拉框选中有效值，或带下级子项的下拉框及其子项都选中有效值时，激活按钮

现有代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="empType">
  <option value="0">SELECT</option>
  <option value="1">LINE LEADER</option>
  <option value="2">TECHNICIAN</option>
</select>

<select id="phase">
  <option value="0">SELECT</option>
</select>

<select id="subPhase" hidden>
  <option value="0">SELECT</option>
  <option value="1">COMMON</option>
  <option value="2">ELECTRICAL</option>
  <option value="3">MECHANICAL</option>
</select>
<br>
<br>
<button disabled>CHECK ME</button>

const type = document.getElementById("empType");
const phase = document.getElementById("phase");
const subPhase = document.getElementById("subPhase");


type.addEventListener("change", appendPhase);

function appendPhase(){
  $("#phase").empty();
  var option = '';
  if(type.value == 1){
      option += '<option value="0">SELECT</option><option value="1">Trainee</option><option value="2">Acting</option><option value="3">Competency</option>'
  }
  if(type.value == 2){
      option += '<option value="0">SELECT</option><option value="1">Phase 1</option><option value="2">Phase 2</option>'
  }  
  if(type.value == 0){
      $(subPhase).attr("hidden", true);
      option += '<option value="0">SELECT</option>'
  }
  $(phase).append(option);
  $(subPhase).attr("hidden", true);
}

phase.addEventListener("change", showIfTech);

function showIfTech() {
  if(type.value == 2){
    $(subPhase).attr("hidden", false);
  }
}

要实现这个逻辑，核心是添加一个实时校验函数，在所有下拉框变动时检查是否满足激活按钮的条件。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="empType">
  <option value="0">SELECT</option>
  <option value="1">LINE LEADER</option>
  <option value="2">TECHNICIAN</option>
</select>

<select id="phase">
  <option value="0">SELECT</option>
</select>

<select id="subPhase" hidden>
  <option value="0">SELECT</option>
  <option value="1">COMMON</option>
  <option value="2">ELECTRICAL</option>
  <option value="3">MECHANICAL</option>
</select>
<br>
<br>
<button disabled>CHECK ME</button>

<script>
const type = document.getElementById("empType");
const phase = document.getElementById("phase");
const subPhase = document.getElementById("subPhase");
const checkBtn = document.querySelector("button");

// 绑定所有需要触发校验的事件
type.addEventListener("change", appendPhase);
phase.addEventListener("change", showIfTech);
subPhase.addEventListener("change", validateForm);

function appendPhase(){
  $("#phase").empty();
  var option = '';
  if(type.value == 1){
      option += '<option value="0">SELECT</option><option value="1">Trainee</option><option value="2">Acting</option><option value="3">Competency</option>'
  }
  if(type.value == 2){
      option += '<option value="0">SELECT</option><option value="1">Phase 1</option><option value="2">Phase 2</option>'
  }  
  if(type.value == 0){
      $(subPhase).attr("hidden", true);
      option += '<option value="0">SELECT</option>'
  }
  $(phase).append(option);
  $(subPhase).attr("hidden", true);
  validateForm(); // 切换员工类型后立即校验
}

function showIfTech() {
  if(type.value == 2){
    $(subPhase).attr("hidden", false);
  } else {
    $(subPhase).attr("hidden", true);
  }
  validateForm(); // 切换phase后立即校验
}

// 核心校验逻辑
function validateForm() {
  let canEnableBtn = false;
  
  // 先确认员工类型已选中有效值
  if (type.value !== "0") {
    // 非TECHNICIAN类型：只需phase选中有效值
    if (type.value !== "2" && phase.value !== "0") {
      canEnableBtn = true;
    }
    // TECHNICIAN类型：需要phase和subPhase都选中有效值
    else if (type.value === "2" && phase.value !== "0" && subPhase.value !== "0") {
      canEnableBtn = true;
    }
  }
  
  // 更新按钮状态
  checkBtn.disabled = !canEnableBtn;
}
</script>

关键改动说明 #

1. 新增validateForm校验函数：
   • 先判断员工类型是否选了有效值（值不为0）
   • 根据类型分支：非技师类只需要phase选好，技师类需要phase和subPhase都选好才激活按钮
2. 全局绑定校验触发：
   • 员工类型切换、phase切换、subPhase切换时都自动触发校验，确保按钮状态实时更新
3. 优化showIfTech函数：
   • 加了else分支，非技师类型时自动隐藏subPhase，避免界面冗余

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