使用先前的值填充下拉列表，同时删除选中的值 - Populate a dropdown using previous value also removing the selected value

Populate a dropdown using previous value also removing the selected value

本文关键字：删除填充下拉列表 | 更新日期: 2023-09-27

我有一个来自数据库的数据列表。我用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();

您也可以在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(); 
    }
     });

我建议你做的是为每个选项添加一个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();