複製複選框的選項不能與其中一個選項相同

我有兩個<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

複製複選框的選項不能與其中一個選項相同

回答

相關問題