Question

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

Answer 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>

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

1 个答案: