选中同Div内Select选项后，如何禁用该Div内其他Select？

我明白你遇到的困扰了——之前的代码没精准定位到当前Select所在的父级Div，导致要么全局生效要么完全没效果。咱们可以通过以下步骤实现需求：

核心思路 #

当任意一个Select的选项变化时：

• 先锁定当前Select的父级Div容器
• 只针对这个容器内的其他Select进行禁用/启用操作
• 额外判断当前是否选中了有效选项（如果选回空值，就恢复其他Select的可用状态）

修正后的代码实现 #

先整理下你的HTML（让结构更清晰）：

<div class="select-group">
  1: 
  <select class="first">
    <optgroup label="Div 1, select 1">
      <option value="">...</option>
      <option value="1-1">1.1</option>
      <option value="1-2">1.2</option>
    </optgroup>
  </select><br />
  2: 
  <select class="second">
    <optgroup label="Div 1, select 2">
      <option value="">...</option>
      <option value="1-1">1.1</option>
      <option value="1-2">1.2</option>
    </optgroup>
  </select>
</div> 
<div class="select-group">
  1: 
  <select class="first">
    <optgroup label="Div 2, select 1">
      <option value="">...</option>
      <option value="2-1">1.1</option>
      <option value="2-2">1.2</option>
    </optgroup>
  </select><br />
  2: 
  <select class="second">
    <optgroup label="Div 2, select 2">
      <option value="">...</option>
      <option value="2-1">1.1</option>
      <option value="2-2">1.2</option>
    </optgroup>
  </select>
</div>

然后是关键的jQuery代码：

$(document).ready(function() {
  // 给所有select绑定change事件
  $('select').on('change', function() {
    const $currentSelect = $(this);
    const $parentDiv = $currentSelect.closest('div');
    // 获取当前选中的值
    const selectedValue = $currentSelect.val();
    
    // 筛选父级div内除当前select外的所有select
    const $otherSelects = $parentDiv.find('select').not($currentSelect);
    
    if (selectedValue) {
      // 选中有效选项时，禁用其他select
      $otherSelects.prop('disabled', true);
    } else {
      // 选回空选项时，恢复其他select的可用状态
      $otherSelects.prop('disabled', false);
    }
  });
});

代码细节说明 #

• $(this)：精准指向当前触发事件的Select元素，确保操作只围绕当前交互的控件展开
• closest('div')：锁定当前Select所在的父级Div，彻底避免影响其他Div里的元素
• find('select').not($currentSelect)：精准筛选出同Div内的其他Select，不会误操作当前选中的控件
• 使用prop()而非attr()：对于disabled这类布尔值属性，jQuery推荐用prop()操作，状态切换更可靠

这样就能实现你想要的效果：每个Div内的Select互相独立，选中其中一个的有效选项时，同Div内的其他Select会被禁用；如果选回空选项，其他Select会重新恢复可用。

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