0

一开始我有两个<select>选项相似的盒子。

当用户选择选项X时，<select id="first">应从同一选项中删除，<select id="second">反之亦然。

我更喜欢 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 个选项。选择一个后，#first我得到 9 个选项#second。如果我从#second第一个选择的项目中的九个项目中选择一个被删除#first，我只有 8 个项目#first。可以重复此步骤，并以一个空<select>和一个只有一个选项结束。

我想到了一种临时对象，它可以一直保存原始选项。

任何想法如何解决它？

4

1 回答 1

0

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

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

如果您希望在浏览器之间保持一致，这是 jQuery 更容易使用原始 JavaScript 的事情之一

于 2013-10-16T08:45:23.080 回答