javascript - JS保持同步选择(无jquery)

我在页面上有两个SELECT元素，我需要做的是如果第一个被更改，让第二个包含第一个中的所有OPTIONS，但第一个中当前选中的除外。

它们以相同的选项开始，如果需要，我可以禁用第二个，直到选择第一个。所以，如果我有：

...
<select id="selectOne" onchange="someFuntion()">
  <option value="1">One</>
  <option value="2">Two</>
  <option value="3">Three</>
</select>

<select id="selectOne" onchange="someFuntion()">
  <option value="1">One</>
  <option value="2">Two</>
  <option value="3">Three</>
</select>
...

...并且在第一个中选择了两个，然后应从第二个中将其删除。然后，如果在第一个中选择了Three，则第二个应具有第一个中列出的所有内容（再次包括Two），除了Three。第一个选项永远不会改变，第二个选项应该始终将第一个选项包含在当前选择选项之外的所有内容中。关于如何最好地完成这样的事情的任何想法？

我无法为此添加JQuery，因此请不要提供Jquery的特定答案。除此之外，几乎还可以进行任何操作。我可以从第二个中删除第一个中选择的初始值，但是不确定如何从那里处理更改。

TIA！

最佳答案

如果禁用selectTwo中的选项很好，则可以执行以下操作。如果不是，则可以使用display：none类“隐藏”匹配选项，并使用classList.add和classList.remove隐藏和显示而不是禁用和启用。

这里的hide和disable方法都可能导致要删除的项目是selectTwo中当前选中的项目。在那种情况下，两种策略都不是很好的。如果必须避免，则可以将selectTwo的值设置为“好”一个，或者删除selectTwo的子代并克隆selectOne的未选择子代，然后将其添加到selectTwo。

如果您需要删除/克隆策略的示例，请告诉我，我将其发布。

function selectClick(event) {
  var that = document.querySelector("#selectTwo");
  var thatOptions = that.querySelectorAll("option");

  for (var i = 0; i < thatOptions.length; i++) {
    thatOptions[i].disabled = (thatOptions[i].value === this.value);
  }
}

document.querySelector("#selectOne").addEventListener("change", selectClick);

<select id="selectOne">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="selectTwo">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>