如果在任何选择中选择了该选项,我试图尝试禁用一个选项
因此,例如,如果name =“select1”已经选择了“测试2”选项,那么我想要在两个select语句中禁用“Test 2”,如果有其他事情被检查,它会重新启用上一个选项。
我在这里写了一个示例脚本,我以为会让我“关闭”…但是这让我远离了这里。任何帮助将不胜感激。
<script type="text/javascript"> $(document).ready(function(){ $("select").change(function() { $("select").find("option:selected").attr('disabled',true); }); }); </script> <select name="select1"> <option>No Match</option> <option value="1">Test</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> <select name="select2"> <option>No Match</option> <option value="1">Test</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select>
解决方法
现场演示:
http://jsfiddle.net/dZqEu/
$('select').change(function() { var value = $(this).val(); $(this).siblings('select').children('option').each(function() { if ( $(this).val() === value ) { $(this).attr('disabled',true).siblings().removeAttr('disabled'); } }); });
您可能更喜欢此版本的代码:
$('select').change(function() { $(this) .siblings('select') .children('option[value=' + this.value + ']') .attr('disabled',true) .siblings().removeAttr('disabled'); });
现场演示:http://jsfiddle.net/dZqEu/2/
请注意,此第二个版本是单行(一行代码),但我将其格式化为更易于阅读。我更喜欢这第二版。
另外,请注意,我的代码假定这两个SELECT框是DOM的兄弟元素。如果这不是你的情况,那么这个代码 – $(this).siblings(‘select’) – 将不适合你,你必须使用jQuery的遍历方法跳转到另一个SELECT框。
在最坏的情况下 – 当SELECT框在DOM树中相隔很远时,遍历不会很有效 – 您可以为其分配ID属性,并使用此代码选择另一个框:
$('#select1,#select2').not(this)