实现选中一个<select>下拉框选项时禁用另一个下拉框对应选项

我来帮你搞定这个需求！核心思路就是监听两个下拉框的选择变化，实时同步禁用对应的选项，下面是具体的实现方案：

步骤1：完善HTML结构 #

首先给两个下拉框添加唯一ID，方便JavaScript获取元素（假设另一个下拉框是Receiver，和Sender结构一致）：

<span>Sender:</span>
<select required name="Sender" id="senderSelect">
  <option selected disabled value="Select one">Select one</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<span>Receiver:</span>
<select required name="Receiver" id="receiverSelect">
  <option selected disabled value="Select one">Select one</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

步骤2：编写JavaScript逻辑 #

我们需要监听两个下拉框的change事件，每次选择变化时，先恢复另一个下拉框的所有可选项（除了默认的禁用选项），再禁用当前选中值对应的选项：

// 获取两个下拉框元素
const senderSelect = document.getElementById('senderSelect');
const receiverSelect = document.getElementById('receiverSelect');

// 定义处理联动禁用的函数
function handleSelectChange(currentSelect, targetSelect) {
  // 先恢复目标下拉框中所有非默认选项的可用状态
  Array.from(targetSelect.options).forEach(option => {
    if (option.value !== 'Select one') {
      option.disabled = false;
    }
  });

  // 获取当前选中的值
  const selectedValue = currentSelect.value;
  // 如果选中的不是默认选项，禁用目标下拉框中对应值的选项
  if (selectedValue !== 'Select one') {
    const targetOption = targetSelect.querySelector(`option[value="${selectedValue}"]`);
    if (targetOption) {
      targetOption.disabled = true;
    }
  }
}

// 给两个下拉框绑定change事件
senderSelect.addEventListener('change', () => {
  handleSelectChange(senderSelect, receiverSelect);
});

receiverSelect.addEventListener('change', () => {
  handleSelectChange(receiverSelect, senderSelect);
});

效果说明 #

• 当你在Sender下拉框选中某个选项（比如A），Receiver下拉框里的A会立刻变成灰色，无法选择；
• 如果你切换Sender的选项到B，Receiver里的A会恢复可用，同时B被禁用；
• 反过来操作Receiver下拉框，Sender里的对应选项也会同步禁用，完全双向联动。

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