Javascript 重复的复选框不能具有在其中一个复选框上选择的相同选项

我有两个盒子，一开始有类似的选择

当用户选择同一选项中的选项X时，应删除该选项，反之亦然

我更喜欢JavaScript解决方案，不需要像jQuery这样的附加框架。我目前有以下解决方案：

/* first  - the first check-box
   second - the second check-box */

$('#first').bind('change', function () {
    $('option:not(:selected)', this).clone().appendTo($('#second').empty());
});

$('#second').bind('change', function () {
    $('option:not(:selected)', this).clone().appendTo($('#first').empty());
});

但是，我有以下问题：假设我们在两个选择框中都有10个选项。在第一次选择一个之后，我在第二次选择中得到了9个选项。如果我在第二秒内从九个项目中选择一个，第一个选择的项目将在第一个项目中被删除，而我在第一个项目中只有8个项目。可以重复此步骤，并以一个空的和一个只有一个选项结束

我考虑了一种临时对象，它可以节省原始选项的所有时间

---

有什么办法可以解决吗？

您应该能够根据需要显示和隐藏选项，例如：

$('#first').bind('change', function () {
        $("#second option").show();
        $("#second option[value='" + $(this).find('option:selected').attr('value') +"']").hide();
  });

---

如果您希望使jQuery在不同浏览器之间保持一致性，那么jQuery使用普通JavaScript要容易得多，这就是其中之一

它似乎可以做到这一点，但是隐藏元素是浏览器一致的吗？我在HTML5上使用它作为混合应用程序，所以我担心它不能在所有设备上工作。@dima它是有效的HTML5吗？它比HTML5更像jQuery，不是吗？@Dima jQuery只是JS和CSS的包装器，因此如果底层HTML/CSS模型中没有支持，那么就无法在jQuery中实现它。jQuery抽象了许多html/css模型之间的差异，因此在跨浏览器兼容方面更易于使用。由于这是通过在现代浏览器中使用CSS实现的，因此将支持itYou right。是否可以删除.find并写入：$second选项[value='+$this+'选项：selected'.attr'value'+'].hide？不要删除或隐藏元素。而是使用.disabled=true禁用它。然后您可以简单地启用所有其他元素。