Javascript jQuery-如果用户选择了下拉项，则删除该下拉项

我有4个下拉列表，其中包含从数据库中获取的下拉列表中的团队列表。我已经将下拉列表的代码放在下面，很抱歉它是用JADE的HTML模板引擎编写的，但我就是这样编写代码的。我也将当前的jQuery脚本放在下面

目前，这是可行的，如果我从第1组到第4组选择一个团队，那么这是可行的，但是如果我改变主意选择其中一个下拉列表…那么整个列表就会一团糟，因为它已经删除了某些项目

如果我在团队1中输入了一个团队，它应该会从列表的其余部分消失……但是如果我更改了团队1，该团队应该再次出现在列表的其余部分，但目前没有

有没有办法解决这个问题

翡翠下拉列表：

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

团队下载翡翠：

-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：

---

也许这可以满足您的需求：

---

在每个

.change（）

的开头，您需要显示所有选项。执行以下操作以了解原因：将“第一次选择”更改为值2，将“第二次选择”更改为值3，然后将“第一次选择”更改为值1。您将看到无法再在第三选择中选择值2。不久前我解决了一个类似的问题@烘烤你链接到我的jddle？@烘焙这个答案是有效的，但是你能解释为什么选择选项之后，你不能再选择我在每个下拉列表中设置为第一个选项的空白选项……这确保我可以进入一个空白的团队。感谢您的帮助。@Dom在实现您对我的代码的回答时遇到困难，因为我对JavaScript不太熟悉。@Germainel不确定我是否理解您的问题，您说的空白选项是指选项值1吗？

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