3

我有 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

团队下拉玉：

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

小提琴：

http://jsfiddle.net/m8QCZ/

4

1 回答 1

5

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

看演示

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();
});
于 2013-04-05T22:06:42.880 回答