我有以下代码
$('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项时,它会在其他两个迭代的下拉列表中禁用它,但是如果我再单击另一个列表中的另一个选项,则会启用其他选项中的选项.
我希望能够在一个下拉列表中选择该选项,并在所有其他下拉列表中保持禁用状态,直到取消选中该选项.
这可能吗？
JS fiddle
解决方法
这与您已经拥有的几乎完全相同,除了每次更改时循环遍历每个选择,并禁用在其他选择中选择的选项：
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);
});
});
Here’s a fiddle