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

jQuery - 删除用户选择的下拉项

1 个答案: