Question

我有两个<select>框，开头有类似的选项。

当用户在<select id="first">中选择 X 选项时，应从<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上选择一个后，我在#second中获得9选项。如果我从#second中的九个项目中选择一项，则#first中的第一个选定项目会被删除，#first中只有8个项目。可以重复这些步骤，以空<select>结束，只有一个选项结束。

我想到了一种可以节省原始选项的临时对象。

任何想法如何解决？

Answer 1

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

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

如果您希望在浏览器中保持一致，那么这就是jQuery更易于使用这些内容的其中之一

复制的复选框不能与其中一个选项相同

1 个答案: