我有3个显示相同选项的列表框。我想禁用在列表框中选中的另外两个列表框中的选项。我想让我的用户先去掉任何列表框。任何帮助都是非常感谢的。
发布于 2011-12-19 19:02:29
如果您有以下HTML:
<select id="select1">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="select2">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="select3">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>你可以做到这一点(在jquery的帮助下):
var previousValues = []
$selects = $('#select1, #select2, #select3');
$selects
.mousedown(function(e) {
// save the previous value for re-enabling it when you change
var val = $(this).val();
if (val) {
previousValues[this.id] = val;
}
})
.change(function(e) {
// get the other select elements
var $theOtherSelects = $selects.not('#' + this.id),
prevVal = previousValues[this.id],
val = $(this).val();
// re-enable the previously disabled option
if (prevVal) {
$theOtherSelects
.find('option[value=' + prevVal + ']')
.prop('disabled', false);
}
// if a value is selected, disble in the other selects
if (val) {
$theOtherSelects
.find('option[value=' + val + ']')
.prop('disabled', true);
}
})
.mousedown()
.change();这是供您使用的jsfiddle。
注释:我之所以使用jQuery,是因为它更简单,可以跨浏览器工作,而且您没有明确表示不想使用它。
发布于 2011-12-19 18:35:51
您可以为每个选项设置一些唯一的属性(该值可能足够了,否则class是一个很好的选择),并在其中一个选择中选中一个选项时,使用jQuery从其他两个选项中选择和删除该选项。
编辑:这里有一个例子,它按照你想要的方向做了一些事情。你得自己修改一下。不过,Didier的答案可能更接近你想要的。
http://jsfiddle.net/baByZ/39/
https://stackoverflow.com/questions/8559999
复制相似问题