JavaScript实现select联动必填：选Test时select2必选问题

原代码无法生效有三个核心错误：

• 对下拉选项的选中状态判断方式错误：:checked选择器只适用于单选框、复选框，<select>的选中状态不能通过子option的:checked判断，更不需要给option加单独id，直接读取select元素的value即可。
• 对required属性的操作逻辑错误：.is(":required")只是判断元素是否带有required属性，根本不会给元素设置必填状态；且代码只在页面加载完成时执行一次，用户切换下拉选项时不会触发任何逻辑，无法实现联动。
• HTML结构缺少必要的空值占位：当前select2默认就会选中第一个test1选项，就算加了必填校验，也会因为有默认值直接判定为已填写，达不到“必须主动选择”的校验效果。

HTML部分调整 #

给两个下拉框都增加value为空的默认占位选项，移除option上多余的id，通过value区分选项：

<select id="select1">
  <option value="">请选择</option>
  <option value="Test">Test</option>
  <option value="Exam">Exam</option>
</select>

<select id="select2">
  <option value="">请选择</option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>

<button id="submitBtn">提交</button>

如果把两个select放在原生<form>标签里，浏览器会自动触发required属性的校验，不需要额外写校验提示逻辑。

JS部分调整 #

监听select1的切换事件，动态给select2添加/移除required属性，同时在页面初始化时先执行一次状态同步：

$(function() {
  // 初始化同步一次必填状态
  updateSelect2Required();

  // 监听select1的选项切换
  $("#select1").on("change", updateSelect2Required);

  function updateSelect2Required() {
    const selectedVal = $("#select1").val();
    if (selectedVal === "Test") {
      // 选中Test时设置select2为必填
      $("#select2").prop("required", true);
    } else {
      // 其他情况取消必填
      $("#select2").prop("required", false);
    }
  }

  // 如果是ajax提交不使用原生form提交，可以手动触发校验
  $("#submitBtn").on("click", function() {
    const select2Ele = $("#select2")[0];
    if (!select2Ele.checkValidity()) {
      alert("请选择select2对应选项");
      return;
    }
    // 校验通过后执行提交逻辑
    console.log("提交数据");
  })
})

• 操作元素原生布尔属性（required、disabled、checked等）统一用.prop()方法，不要用.attr()，避免属性值和实际状态不同步的问题。
• 联动逻辑必须绑定在对应控件的change事件上，不能只在页面初始化执行一次，否则用户操作后状态不会更新。
• 所有需要做必填校验的下拉框，必须加一个value为空的默认占位选项，否则默认选中第一个有效值的话，必填校验永远不会触发。

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