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个选项。我已经搞砸了一点但似乎无法让它正常工作。任何建议或提示将不胜感激。一如既往地感谢您的任何建议！

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>

从其他选择选项中删除已选择的选项

1 个答案: