使用先前值填充下拉列表,同时删除所选值

I have a list of data coming from database.I am populating two dropdowns with this data using jQuery.

However, once the user selects the first team then only the second team list will show otherwise it won't.

When the user selects the first team, that team id will be removed from the second list but can be added again if the user changes the First team to that id.

Here is the code:

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

Here is the jquery that I am using.

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

You can also check demo at 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(); 
    }
     });

What I suggest you do is add each option an ID, and then remove that element from the second dropdown. Modify your loops like so:

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

Then when you select the first team, use this to remove the element from the second dropdown:

var team1Id = $(".team1:selected").attr('id');
$(".team2 #"+team1Id).remove();