jQuery的 - 如果它是由用戶

Question

選擇我有4個下拉列表與球隊的名單中下拉從數據庫中獲取列表中刪除一個下拉項。我已經把代碼放在下面的下拉列表中，我很抱歉它是用JADE的HTML模板引擎編寫的，但是這是我編寫代碼的方式。我已經把我現在的jQuery腳本放在下面了。如果我從團隊1走到團隊4並選擇一個團隊，那麼它可以工作，但是如果我改變了我對於其中一個下降的想法......那麼整個團隊清單打亂了，因爲它已經刪除某些項目...

如果我進入TEAM1一個團隊，應該從列表的其餘部分消失....但如果我改變團隊1，團隊應該出現在剩下的名單再次，但它目前沒有。

任何想法如何解決這一問題？

JADE下拉菜單：

div.row 
    label.control-label(for="team1") Team 1: 
    div.controls 
     select#team1(style='width: 160px;') 
      include teamsDropDown 
div.row 
    label.control-label(for="team2") Team 2: 
    div.controls 
     select#team2(style='width: 160px;') 
      include teamsDropDown 
div.row 
    label.control-label(for="team3") Team 3: 
     div.controls 
      select#team3(style='width: 160px;') 
       include teamsDropDown 
div.row 
     label.control-label(for="team4") Team 4: 
      div.controls 
       select#team4(style='width: 160px;') 
        include teamsDropDown 

teamsDropDown JADE：

-if(teamsList.length > 0){ 
    option 
    -each team in teamsList 
    option.teamDropDown(id="#{team.key}",value="#{team.key}") #{team.name} 
-}else{ 
    No teams till now.. 
-} 

jQuery腳本：

script(type='text/javascript') 
$('select').change(function() { 
$('select').not(this).children('option[value=' + $(this).val() + ']').remove(); 
}); 

JFiddle：

http://jsfiddle.net/m8QCZ/

Answer 1

也許這可以養活你的需求：

SEE DEMO

var $selects = $('select'); 
$('select').change(function() { 
    $('option:hidden', $selects).each(function() { 
     var self = this, 
      toShow = true; 
     $selects.not($(this).parent()).each(function() { 
      if (self.value == this.value) toShow = false; 
     }) 
     if (toShow) $(this).show(); 
    }); 
    if (this.value != 0) //to keep default option available 
     $selects.not(this).children('option[value=' + this.value + ']').hide(); 
});