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