PHP从数据库填充多下拉框，jQuery实现表格行选项互斥

刚好做过类似的需求，给你一个适配表格行场景的jQuery解决方案，亲测好用👇

HTML结构示例 #

假设你的表格结构是这样的（每行一个下拉框，统一加dynamic-select类）：

<table id="options-table">
  <tr>
    <td>
      <select class="dynamic-select">
        <option value="">请选择</option>
        <option value="1">选项A</option>
        <option value="2">选项B</option>
        <option value="3">选项C</option>
        <option value="4">选项D</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select class="dynamic-select">
        <option value="">请选择</option>
        <option value="1">选项A</option>
        <option value="2">选项B</option>
        <option value="3">选项C</option>
        <option value="4">选项D</option>
      </select>
    </td>
  </tr>
  <!-- 可以添加更多行 -->
</table>

jQuery核心实现代码 #

这段代码会监听所有下拉框的变化，实时同步选项的显示/隐藏状态：

$(document).ready(function() {
  // 监听下拉框变化事件（如果是动态新增行，用下面的委托写法）
  $('.dynamic-select').on('change', syncSelectOptions);

  // 页面初始化时触发一次，确保初始状态正确
  syncSelectOptions();

  // 核心逻辑函数
  function syncSelectOptions() {
    // 收集所有已选中的非空值（去重，避免重复处理）
    const selectedValues = [...new Set(
      $('.dynamic-select').map(function() {
        return $(this).val() || null;
      }).get().filter(val => val !== null)
    )];

    // 遍历每个下拉框，更新选项状态
    $('.dynamic-select').each(function() {
      const currentSelect = $(this);
      const currentVal = currentSelect.val();

      currentSelect.find('option').each(function() {
        const optionVal = $(this).val();
        // 空选项始终显示
        if (optionVal === '') {
          $(this).show();
          return;
        }
        // 规则：如果选项已被其他下拉框选中，且不是当前下拉框自己选的，就隐藏
        if (selectedValues.includes(optionVal) && optionVal !== currentVal) {
          $(this).hide();
        } else {
          $(this).show();
        }
      });
    });
  }
});

关键逻辑说明 #

1. 收集选中值：用map获取所有下拉框的选中值，过滤掉空值后去重（避免同一个选项被多次选中的情况）。
2. 选项显示规则：
   • 空选项（请选择）始终显示，方便用户取消选择。
   • 已被其他下拉框选中的选项，在当前下拉框中隐藏，但当前下拉框自己选中的选项会保留显示（不然用户没法取消选择）。
3. 初始化触发：页面加载时主动执行一次逻辑，确保初始状态正确。

适配动态新增表格行 #

如果你的表格行是通过JS动态添加的（比如点击按钮新增行），需要把事件监听改成委托模式，替换掉原来的$('.dynamic-select').on('change', syncSelectOptions)：

$('#options-table').on('change', '.dynamic-select', syncSelectOptions);

这样动态新增的行里的下拉框也能触发同步逻辑。

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