如何在两个不同的 select html 标签中禁用相同的选择

Question

标题可能有点乱，不过我会解释的。我需要制作网页的前端以在线预订航班。在该页面上，有两个下拉菜单，用户必须在其中选择他想旅行的机场和目的地。所以，我的任务的一部分和一个问题是，我怎样才能禁用这两个相同的选择？从逻辑上讲，一个人不能从巴黎飞到巴黎。

Answer 1

加载时，在某种意义上，您可以通过 slice() 快照原始选项。然后在您的事件侦听器中根据在您的原始 select 框中 select 编辑的内容过滤它们。获得 select 组选项后，清空目标 select 框并用过滤后的选项重新填充它。

const destination = document.getElementById('destination');

const originalOptions = Array.from(destination.options).slice(0);

document.getElementById('origin').addEventListener('change', e => {
  const currentOptions = Array.from(originalOptions).filter(option => option.value !== e.currentTarget.value);
  
  destination.length = 0;
  
  currentOptions.forEach(option => destination.appendChild(option));
});

<select id="origin">
  <option value="paris">Paris</option>
  <option value="london">London</option>
  <option value="australia">Australia</option>
</select>

<select id="destination">
  <option value="london">London</option>
  <option value="paris">Paris</option>
  <option value="australia">Australia</option>
</select>

如何在两个不同的 select html 标签中禁用相同的选择

How to disable the same choice in two different select html tags

html

javascript

css

select

option