根据其他列表中的选择禁用下拉列表中的选项

Question

我有以下代码

$('select').on('change', function(){
    $('select option').prop("disabled", false);
    $("select").not(this).find("option[value="+ $(this).val() +     "]").prop('disabled', true);
});

然后有3个下拉列表

<select name="vote1" id="vote1">
<option value="player1">Player1</option>
<option value="player2">Player2</option>
<option value="player3">Player3</option>
<option value="player4">Player3</option>
</select>
<select name="vote2" id="vote2">
<option value="player1">Player1</option>
<option value="player2">Player2</option>
<option value="player3">Player3</option>
<option value="player4">Player3</option>
</select>
<select name="vote3" id="vote3">
<option value="player1">Player1</option>
<option value="player2">Player2</option>
<option value="player3">Player3</option>
<option value="player4">Player3</option>
</select>

使用我的代码，当您 select 1 个项目时，它会在其他两个项目的下拉列表中禁用它，但是如果我随后单击另一个列表中的另一个选项，它会启用其他选项。

我希望能够 select 一个下拉列表中的选项，并且它在所有其他下拉列表中保持禁用状态，直到它被取消selected。

这可能吗？

JS fiddle

Answer 1

这与您已经拥有的几乎相同，只是每次更改时它都会遍历每个 select，并禁用另一个 selected 选项 select小号：

var $selects = $('select');

$selects.on('change', function() {

    // enable all options
    $selects.find('option').prop('disabled', false);

    // loop over each select, use its value to 
    // disable the options in the other selects
    $selects.each(function() {
       $selects.not(this)
               .find('option[value="' + this.value + '"]')
               .prop('disabled', true); 
    });

});

根据其他列表中的选择禁用下拉列表中的选项

Disable option in dropdown list based on selection in other list

html

jquery

select

drop-down-menu

Here's a fiddle