0

我有一个来自数据库的数据列表。我正在使用 jQuery 用这些数据填充两个下拉列表。

但是，一旦用户选择了第一个团队，则只会显示第二个团队列表，否则不会显示。

当用户选择第一个团队时，该团队 ID 将从第二个列表中删除，但如果用户将第一个团队更改为该 ID，则可以再次添加。

这是代码：

<div class="span6">
    <select data-placeholder="Select Team 1" class="chzn-select team1" tabindex="6" name="team1">
        <option value=""></option>
        <?php 
            foreach($teams AS $t) {
                echo '<option value="'.$t->team_id.'">'.$t->team_name.'</option>';
            } 
        ?>
     </select>      
</div>
<div class="span6">
    <select data-placeholder="Select Team 2" class="chzn-select team2" tabindex="6" name="team2">
        <option value=""></option>
        <?php           
            foreach($teams AS $t) {
                echo '<option value="'.$t->team_id.'">'.$t->team_name.'</option>';
            } 
        ?>
    </select>
</div>

这是我正在使用的 jquery。

$(".chzn-select").chosen();
4

2 回答 2

1

您还可以在http://jsfiddle.net/zDpAj/查看演示

    var allteam = $('#team2').html(); 
    $('select#team1').change(function() {     
    var team1 = $('#team1').val();     
    if(team1==="")         
       $('#team2').hide();     
    else     
    {
            $('#team2').show(); 
            $('#team2').html(allteam);
            $("#team2 option[value='"+team1+"']").remove(); 
    }
     });
于 2013-06-19T11:52:49.650 回答
0

我建议您为每个选项添加一个 ID，然后从第二个下拉列表中删除该元素。像这样修改你的循环：

<?php 
            foreach($teams AS $t) {
                echo '<option id="team-'.$t->team_id.'" value="'.$t->team_id.'">'.$t->team_name.'</option>';
            } 
        ?>

然后，当您选择第一个团队时，使用它从第二个下拉列表中删除元素：

var team1Id = $(".team1:selected").attr('id');
$(".team2 #"+team1Id).remove();
于 2013-06-19T11:48:40.037 回答