如何在两个不同的选择 html 标记中禁用相同的选择答案

【问题标题】：How to disable the same choice in two different select html tags如何在两个不同的选择 html 标记中禁用相同的选择
【发布时间】：2017-12-08 17:45:36
【问题描述】：

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

【问题讨论】：

在伪代码中：您将侦听器附加到每个选择元素的更改事件。每次更改时，您都会禁用其他元素中的匹配城市并重新启用任何以前禁用的城市（如果有）。
任何源代码？我们应该如何知道它们长什么样，它们有什么类名等等？
这里是代码：jsfiddle.net/7q47268o

标签： javascript html css select option

【解决方案1】：

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

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>

【讨论】：