CODEWITHSUNDEEP
jquery
BL10s
BL10s

Reputation: 43

removing already chosen select options from other select options

I have 3 groups of select options. The option will be the same for all 3 groups. Right now if option 1 is chosen in the first group it will not show in the following groups. 

<select name='Player_1'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option> 
</select>
<br><br>
<select name='Player_2'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option> 
</select>
<br><br>
<select name='Player_3'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option> 
</select>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    var $dropdown1 = $("select[name='Player_1']");
    var $dropdown2 = $("select[name='Player_2']");
    var $dropdown3 = $("select[name='Player_3']");

    $dropdown1.change(function() {
        $dropdown2.empty().append($dropdown1.find('option').clone());
        var selectedItem = $(this).val();
        if (selectedItem) {
            $dropdown2.find('option[value="' + selectedItem + '"]').remove();
            $dropdown3.find('option[value="' + selectedItem + '"]').remove();
        }
    });
    $dropdown2.change(function() {
        $dropdown3.empty().append($dropdown2.find('option').clone());
        var selectedItem = $(this).val();
        if (selectedItem) {
            $dropdown3.find('option[value="' + selectedItem + '"]').remove();
        }
    });
</script>

The above all works fine, if I go down the select groups in order.

My question is...

How can I get it to work in any order? Say I pick 3 in the third group how can I get it to then eliminate the 3rd option from the first two groups. I have messed round a bit but can't seem to get it to work properly. Any suggestions or hints would be greatly appreciated. As always thanks for any advice!

Upvotes: 0

Views: 46

Answers (1)

Meiko Rachimow
Meiko Rachimow

Reputation: 4724

hope this helps

<select name='Player_1'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option> 
</select>
<br><br>
<select name='Player_2'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option> 
</select>
<br><br>
<select name='Player_3'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option> 
</select>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    var dropdowns = $("select");
    dropdowns.change(function() {
      dropdowns.find('option:not(:selected)[value="' + $(this).val() + '"]').remove();
    });
</script>

Upvotes: 1

Related Questions