すでに選択されている選択肢を他の選択肢から削除する

Question

3つの選択肢があります。オプションは3つのグループすべてで同じになります。現在、最初のグループでオプション1を選択した場合、次のグループには表示されません。

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

上記のすべてがうまくいきます。選択したグループを順番に削除しても問題ありません。

私の質問は、私はそれがどのような順序で動作するように取得できますか...

のですか？ 3番目のグループで3を選んで、最初の2つのグループから3番目のオプションを削除するにはどうすればいいですか？私はちょっとラウンドを乱したが、それが正しく動作するように見えることができない。どんな提案やヒントも高く評価されます。何かアドバイスありがとうございました！

Answer 1

希望これは

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