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

Question

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

Answer 1

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