根据其他列表中的选择，在下拉列表中禁用选项 [英] Disable option in dropdown list based on selection in other list

问题描述

我有以下代码

$('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>

使用我的代码，当您选择1项时，它会在其他两个iteam的下拉列表中禁用它，然而，如果我在另一个列表中点击另一个选项，它会启用其他列表中的选项。

With my code when you select 1 item it disables it in the dropdown list of the other two iteams, however if I then click on another option in another list, it enables the options in the others.

我想要在一个下拉列表中选择该选项，在所有其他下拉列表中保持禁用，直到它被取消选择。

I want to be able to select the option in one dropdown list and it stays disabled in all the other dropdown lists until it is deselected.

这是可能吗？

JS小提琴

推荐答案

这与你已经有了一样，除了它循环每次选择每次更改，并禁用在其他选项中选择的选项：

This is pretty much the same as what you already had, except it loops over each select each time one changes, and disables the option selected in the other selects:

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

});

这篇关于根据其他列表中的选择，在下拉列表中禁用选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！