多选下拉框存在符合年龄条件选项时显示验证区块并控制必填属性

需求说明 #

原脚本在多选下拉场景中，只要存在未满足data-age≥18的选中选项，年龄验证区块就会隐藏。现需调整为：只要有任意一个选中选项的data-age≥18，就显示验证区块；同时根据是否有匹配选项，动态切换复选框的required属性——区块显示时复选框必填，区块隐藏时取消必填，保证表单正常提交。

修改后的完整代码 #

<form>
  <select multiple="" data-name="My Dropdown" name="My Dropdown" id="myDropdown">
    <option value="">Select as many as you like...</option>
    <option value="Option 1" data-age="">Option 1</option>
    <option value="Option 2" data-age="18">Option 2</option>
    <option value="Option 3" data-age="">Option 3</option>
    <option value="Option 4" data-age="">Option 4</option>
    <option value="Option 5" data-age="18">Option 5</option>
  </select>

  <div id="age-block" style="display:none;">
    <label>Age Verification</label>
    <label>
      <input type="checkbox" id="age-check" name="Age-Check" data-name="Age Check">
      <span>I confirm that I am 18 and over for <span class="matches"></span></span>
    </label>
  </div>
  <input type="submit" value="Submit" data-wait="Please wait...">
</form>

<script>
jQuery(document).ready(function(){
  // 初始化时先执行一次判断
  checkAgeRequirements();
  
  $("#myDropdown").change(function() {
    checkAgeRequirements();
  });

  function checkAgeRequirements() {
    // 筛选出所有选中且data-age≥18的选项
    const eligibleOptions = $("#myDropdown option:selected").filter(function() {
      const age = $(this).data('age');
      return age !== "" && parseInt(age) >= 18;
    });

    const hasEligible = eligibleOptions.length > 0;
    const ageBlock = $("#age-block");
    const ageCheck = $("#age-check");
    const matchesSpan = $(".matches");

    if (hasEligible) {
      ageBlock.show();
      ageCheck.prop("required", true);
      // 将符合条件的选项名称拼接显示
      const optionNames = eligibleOptions.map(function() {
        return $(this).text();
      }).get().join(", ");
      matchesSpan.text(optionNames);
    } else {
      ageBlock.hide();
      ageCheck.prop("required", false);
      matchesSpan.text("");
    }
  }
});
</script>

关键改动说明 #

• 多选适配逻辑：使用filter方法遍历所有选中选项，判断是否存在data-age≥18的项，替代原有的单一选项判断逻辑，完美适配多选场景。
• 布尔属性正确处理：用prop()设置required属性（而非attr()），因为required是布尔类型属性，prop()能正确处理其状态切换。
• 初始化校验：页面加载时执行一次判断，避免初始状态下的显示异常。
• 用户体验优化：自动将符合年龄要求的选中选项名称显示到验证文本中，让用户明确知晓需要验证的目标选项。

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