如何实现Select输入框选项去重：选中后其他框隐藏该选项

我有3个<select>输入框，每个均包含4个选项。要求实现：

• 当在第一个Select中选中选项3后，其余Select输入框不应再显示选项3；
• 若在第二个Select中选中选项4，另外两个Select也需隐藏选项4；
• 最终第一个Select仅显示已选的选项3、选项1和选项2，最后一个Select仅显示选项1和选项2。

我尝试了以下代码但效果不佳：

$(document).ready(function() {
  var selects = document.querySelectorAll('select');

  for (var i = 0; i < selects.length; i++) {
    selects[i].addEventListener('change', function() {
      var selectedOption = this.value;
      for (var j = 0; j < selects.length; j++) {
        if (selects[j] !== this) {
          var options = selects[j].options;
          for (var k = 0; k < options.length; k++) {
            if (options[k].value === selectedOption) {
              options[k].style.display = 'none';
            } else {
              options[k].style.display = 'block';
            }
          }
        }
      }
    });
  }
});

原代码问题分析 #

1. 仅处理当前下拉框选中的单个值，未收集所有已选中的选项，导致多下拉框选值时会覆盖之前的隐藏状态；
2. 未处理取消选中场景，比如把选中的选项3改选为1时，其他下拉框的选项3无法恢复显示。

修复后的代码 #

$(document).ready(function() {
  const selects = document.querySelectorAll('select');

  // 更新所有下拉框选项的可见性
  function updateSelectOptions() {
    // 收集所有已选中的非空值
    const selectedValues = Array.from(selects)
      .map(sel => sel.value)
      .filter(val => val !== '');

    // 遍历每个下拉框处理选项
    selects.forEach(select => {
      Array.from(select.options).forEach(option => {
        // 非当前下拉框选中值 + 被其他下拉框选中 → 隐藏
        if (option.value !== select.value && selectedValues.includes(option.value)) {
          option.style.display = 'none';
        } else {
          option.style.display = 'block';
        }
      });
    });
  }

  // 给每个下拉框绑定变更事件
  selects.forEach(select => {
    select.addEventListener('change', updateSelectOptions);
  });

  // 页面加载时初始化状态
  updateSelectOptions();
});

代码说明 #

• 全量收集选中值：每次更新时先汇总所有下拉框的有效选中值，避免单值覆盖问题；
• 精准控制显示：每个选项的显示状态由「是否被当前下拉框选中」「是否被其他下拉框选中」两个条件共同决定；
• 支持取消选中：当用户修改选中值时，selectedValues自动更新，对应选项会恢复显示；
• 初始状态同步：页面加载时执行一次更新，确保默认选中项的互斥逻辑生效。

注意事项 #

• 确保下拉框选项的value属性唯一且与选项内容对应（比如选项3的value设为"3"）；
• 若需要默认选中项，直接在HTML的<option>标签上添加selected属性即可。

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