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

我有两个<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上选择一个后，我在#second中获得9个选项。如果我从#second的九个项目中选择一个，那么第一个选择的项目会在#first中被删除，而我的#first中只有8个项目。人们可以重复这些步骤，并以空的<select>结束，只有一个选项。

我想过一种可以节省原始选项所有时间的临时对象。

任何想法如何解决它？

来源

2013-10-16 Dima

不要删除或隐藏元素。而不是_disable_它，使用'.disabled = true'。然后，您可以简单地启用所有其他元素。 – Zeta

为什么不隐藏它们？ – Dima

你应该能够显示和隐藏的选项，因为你需要他们，所以是这样的：

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

，这是那些东西，其中jQuery是一个更容易使用香草JavaScript的一个，如果你希望使其在浏览器中保持一致

来源

2013-10-16 08:45:23

它似乎在做这项工作，但隐藏'

@dima它的有效html5 –

它是？它是更多的jQuery的东西，然后HTML5，不是？ – Dima

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

回答

相关问题