我正在使用此代码。但是,当我选择"一个"在第一个选择框中,然后在第二个选择"两个"当我再次选择第二个值为"三个"但价值"二"保持禁用状态:
HTML代码
// one
<select>
<option>Select</option>
<option value="1" >one</option>
<option value="two">two</option>
<option>three</option>
</select>
//two
<select>
<option>Select</option>
<option value="1" >one</option>
<option value="two">two</option>
<option>three</option>
</select>
这是 JavaScript代码:
$(document).ready(function(e) {
var $selects = $('select#players');
available = {};
$('option', $selects.eq(0)).each(function (i) {
var val = $.trim($(this).text());
available[val] = false;
});
$selects.change(function () {
var $this = $(this);
var selectedVal = $.trim($this.find('option:selected').text());
available[selectedVal] = true;
$selects.not(this).each(function () {
$('option', this).each(function () {
var optText = $.trim($(this).text()),
optCheck = available[optText];
if(optCheck) {
$(this).prop('disabled', true);
}
else {
$(this).prop('disabled', false);
}
});
});
}).change(); // Trigger once to add options at load of first
});
答案 0 :(得分:1)
假设您想要在选择后禁用其他选择框中的值,这里有一个示例。
<select>
<option value="" selected="selected">Select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<select>
<option value="" selected="selected">Select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
$(document).ready(function (e) {
var $selects = $('select');
$selects.change(function () {
var value = $(this).val();
if (value == "") {
return false;
}
$selects.not(this).each(function () {
$('option', this).each(function () {
var sel = $(this).val();
if (sel == value) {
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});
});
}).change(); // Trigger once to add options at load of first
});
工作fiddle
答案 1 :(得分:0)
有点难以理解你在这里问的是什么。我假设您想要知道如何在两个选项框中选中一个选项时禁用选项框。我想的情况是你在两个选择框中显示一个玩家列表,当第一个团队选择其中一个时,另一个团队不能选择同一个玩家?
这是一个工作小提琴:http://jsfiddle.net/theoutlander/MT5th/。我不喜欢jquery,所以我在vanilla JS中做了这个。
// one
<select id="s1" onchange="handleSelection(this, s2)">
<option>Select</option>
<option value="1">one</option>
<option value="two">two</option>
<option>three</option>
</select>
//two
<select id="s2" onchange="handleSelection(this, s1)">
<option>Select</option>
<option value="1" >one</option>
<option value="two">two</option>
<option>three</option>
</select>
function handleSelection(source, dest) {
source.options[source.selectedIndex].disabled=true;
dest.options[source.selectedIndex].disabled=true;
}
答案 2 :(得分:0)
你的javascript的第一行...
var $selects = $('select#players');
......实际上并没有选择任何东西。你需要添加一个id&#39;玩家&#39;您的选择元素之一,或更改您的选择器。
另外,我无法弄清楚你实际上想要做什么。您能否更清楚地说明您的目标是什么?