javascript - jQuery - ユーザーが選択した場合、ドロップダウン項目を削除します

Question

データベースから取得したドロップダウンリストにチームのリストを含む4つのドロップダウンリストがあります。ドロップダウン リストのコードを以下に示します。申し訳ありませんが、JADE の HTML 用テンプレート エンジンで記述されていますが、これがコードの記述方法です。現在のjQueryスクリプトも下に置きました。

現時点では、チーム 1 からチーム 4 に移動してチームを選択するとうまくいきますが、ドロップダウンの 1 つについて考えを変えると、リスト全体が次のように台無しになります。それはすでに特定のアイテムを削除しました...

チーム1にチームを入力すると、残りのリストから消えるはずです....しかし、チーム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

teamDropDown 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();
});  

Jフィドル:

http://jsfiddle.net/m8QCZ/