CODEWITHSUNDEEP
phpjavascriptjqueryhtml-select
Pranaya Behera
Pranaya Behera

Reputation: 555

Populate a dropdown using previous value also removing the selected value

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

Upvotes: 0

Views: 712

Answers (2)

VibhaJ
VibhaJ

Reputation: 2256

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

Upvotes: 1

Gregor Menih
Gregor Menih

Reputation: 5116

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

Upvotes: 0

Related Questions