如何实现下拉框数值联动：根据minimum值禁用maximum的不符合选项

这是个很常见的联动下拉需求，我来帮你补全并优化代码，实现你想要的功能：

完整实现代码 #

首先是HTML结构（给你补全了完整的选项示例）：

<select name="minimum" class="selectClass">
  <option value="">请选择最小值</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <!-- 省略5-24的选项 -->
  <option value="25">25</option>
</select>

<select name="maximum" class="selectClass">
  <option value="">请选择最大值</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <!-- 省略5-24的选项 -->
  <option value="25">25</option>
</select>

然后是JavaScript部分（基于你给出的代码片段补全并优化）：

$(".selectClass").change(function() {
  // 第一步：重置所有下拉选项为可用状态，避免之前的禁用残留
  $("select option").prop("disabled", false);
  
  // 获取当前选中的最小值，转成整数
  const selectedMin = parseInt($('select[name="minimum"]').val());
  
  // 如果最小值有有效选中值（不是空字符串）
  if (!isNaN(selectedMin)) {
    // 遍历最大值下拉框的所有选项
    $('select[name="maximum"] option').each(function() {
      const optionValue = parseInt($(this).val());
      // 如果选项值是有效数字且小于选中的最小值，就禁用它
      if (!isNaN(optionValue) && optionValue < selectedMin) {
        $(this).prop("disabled", true);
      }
    });
    
    // 额外优化：如果当前最大值选中的是小于最小值的无效值，自动清空选中状态
    const currentMax = parseInt($('select[name="maximum"]').val());
    if (!isNaN(currentMax) && currentMax < selectedMin) {
      $('select[name="maximum"]').val("");
    }
  }
});

代码逻辑说明 #

• 重置状态：每次下拉框变化时先解锁所有选项，这样当用户重新选择更小的最小值时，之前被禁用的选项能恢复可用
• 精准定位：通过name属性区分两个下拉框，避免和页面其他下拉控件混淆
• 禁用规则：只针对最大值下拉框中数值小于选中最小值的选项进行禁用，保证逻辑准确
• 异常处理：考虑到用户可能先选最大值再改最小值的情况，自动清空无效的最大值选中，避免界面出现矛盾状态

这样就能完美实现你要的联动效果啦！

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