JavaScript多下拉框禁用已选选项时，如何实现触发当前下拉重选已选值

异常原因定位 #

• 原有逻辑的核心收集环节存在漏洞：收集同组已选值用于全局禁用时，没有排除当前触发操作的目标下拉本身，把当前下拉自己选中的值也纳入了全局禁用范围，直接导致当前下拉内的已选值被锁定
• 局部解锁的操作顺序错误：你之前写的$(this).find('option').prop('disabled', false)是在“全量禁用所有已选值”的流程末尾执行的临时覆盖，这个状态不会持久——只要其他任意一个同组下拉触发change，程序就会重新走“全启用→收集所有已选值→全量禁用”的流程，直接覆盖掉你临时解锁的状态，最终只剩最后一次触发的下拉保留解锁效果
• 缺少Select2视图同步：原生修改option的disabled属性后，没有主动触发Select2的状态更新，会出现原生select属性和下拉渲染层状态不一致的问题，进一步加剧操作异常

正确实现方案 #

核心思路是调整已选值的收集范围，从「全组所有已选值」改为「除当前触发下拉之外的其他同组已选值」，从根源上保证当前下拉的已选值永远不会被纳入全局禁用列表。
实现前先给所有同组下拉添加统一标识类，比如same-group-select，方便统一遍历和事件绑定，具体执行逻辑严格按以下顺序执行：

• 第一步：基准状态重置，遍历所有同组下拉，把所有选项的disabled属性全部设为false，回到全启用状态
• 第二步：跨组值收集，遍历所有同组下拉，跳过当前正在触发change的下拉，收集其余下拉的已选值，过滤空值后形成全局禁用值列表
• 第三步：批量禁用设置，遍历所有同组下拉的选项，只要选项的value属于刚才收集的禁用值列表，就把对应option的disabled属性设为true
• 第四步：视图同步，对所有修改过属性的下拉触发Select2的刷新操作，让渲染层和原生select的状态保持一致

示例参考代码 #

// 绑定统一类名的同组下拉change事件
$('.same-group-select').on('change', function () {
  const $currentSelect = $(this);
  const $allGroupSelects = $('.same-group-select');

  // 全量重置为全启用的基准状态
  $allGroupSelects.find('option').prop('disabled', false);

  // 收集其他同组下拉的已选值，排除当前触发的下拉
  const disabledValueList = [];
  $allGroupSelects.each(function () {
    if ($(this).is($currentSelect)) return;
    const selectValue = $(this).val();
    if (selectValue) disabledValueList.push(selectValue);
  });

  // 批量设置需要禁用的选项
  $allGroupSelects.each(function () {
    const $select = $(this);
    $select.find('option').each(function () {
      const optionValue = $(this).val();
      if (disabledValueList.includes(optionValue)) {
        $(this).prop('disabled', true);
      }
    });
    // 同步Select2渲染状态
    $select.select2('refresh');
  });
});

实现后的交互效果 #

• 当前触发的下拉内，自身选中的值永远处于可点击、可重选的启用状态，满足优化需求
• 其他下拉已经选中的值，仍然会在所有同组下拉中被禁用，避免出现多个下拉选同一个值的问题
• 禁用状态是每次操作时全量重新计算的，不会因为其他下拉的触发出现状态覆盖、锁定异常的问题

之前尝试的局部解锁代码之所以失效，本质是没有从收集环节排除当前下拉的自身已选值，临时的状态修改会被下次全量禁用的流程覆盖，无法实现持久化的解锁效果。

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