如何移除select标签中已选中选项及其他select中的对应选项？

当然可以！要实现把已选中的选项从其他下拉框里彻底移除，核心思路是保存原始选项集合，然后在选中状态变化时，动态重构其他下拉框的选项列表，只保留未被选中的选项。下面是具体的实现方案：

示例HTML结构 #

假设你的多个下拉框结构如下（这里用3个select举例，你可以根据实际数量调整）：

<select name="option1" size="1" required>
  <option value="" selected disabled hidden>Options</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select name="option2" size="1" required>
  <option value="" selected disabled hidden>Options</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select name="option3" size="1" required>
  <option value="" selected disabled hidden>Options</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

修改后的JavaScript脚本 #

// 保存所有select的原始选项（每个选项都克隆一份，避免后续操作影响原始数据）
const selectElements = document.querySelectorAll('select[name^="option"]');
const originalOptions = Array.from(selectElements).map(select => {
  return Array.from(select.options).map(opt => opt.cloneNode(true));
});

// 处理选中状态变化的核心函数
function handleSelectChange() {
  // 收集所有已选中的非空有效值（排除默认占位选项）
  const selectedValues = new Set(
    Array.from(selectElements)
      .map(sel => sel.value)
      .filter(val => val !== "")
  );

  // 遍历每个select，重新构建选项列表
  selectElements.forEach((select, index) => {
    // 先清空当前下拉框的所有选项
    select.innerHTML = "";

    // 获取当前select对应的原始选项集合
    const opts = originalOptions[index];

    // 先添加默认的占位选项（保持用户体验一致）
    const defaultOption = opts.find(opt => opt.value === "");
    if (defaultOption) {
      select.appendChild(defaultOption.cloneNode(true));
    }

    // 按需添加可选择的选项
    opts.forEach(opt => {
      if (opt.value === "") return; // 跳过默认选项，已经单独添加过了

      // 如果是触发当前事件的select：保留自己的选中值，同时添加未被其他select选中的选项
      if (select === this) {
        if (opt.value === this.value || !selectedValues.has(opt.value)) {
          select.appendChild(opt.cloneNode(true));
        }
      } else {
        // 其他select：只添加未被任何select选中的选项（彻底移除已选中的选项）
        if (!selectedValues.has(opt.value)) {
          select.appendChild(opt.cloneNode(true));
        }
      }
    });

    // 确保触发事件的select保持当前选中状态，避免重构后选中值丢失
    if (select === this && this.value !== "") {
      select.value = this.value;
    }
  });
}

// 给每个select绑定change事件监听
selectElements.forEach(select => {
  select.addEventListener('change', handleSelectChange);
});

脚本说明 #

1. 保存原始选项：页面加载时就把每个下拉框的选项克隆保存起来，这样后续重构选项时不会丢失原始数据。
2. 收集已选中值：每次选中状态变化时，先把所有下拉框中已选中的有效值收集到集合里，方便快速判断哪些选项需要移除。
3. 动态重构选项：
   • 清空当前下拉框的所有选项，从原始数据重新构建。
   • 对于触发事件的下拉框，保留用户自己选中的选项，同时展示其他未被选中的选项。
   • 对于其他下拉框，只展示未被任何下拉框选中的选项，彻底移除已被选中的选项。
4. 恢复选中状态：重构后确保触发事件的下拉框保持用户之前的选中值，避免体验断裂。

当用户把某个下拉框改回默认选项时，对应的选项会自动重新出现在其他下拉框中，因为此时selectedValues集合会移除该值，重构时就会把它加回去。

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