jQuery< select>如果在其他< select>中选择则禁用该选项

本文介绍了jQuery< select>如果在其他< select>中选择则禁用该选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如果您在任何选择中都选择了某个选项，我将尝试禁用该选项

I am trying to attempt to disable an option if it is selected in any of the selects

因此，例如，如果name ="select1"已选择选项"Test 2"，那么我希望在两个select语句中都禁用"Test 2" ...，如果检查到其他内容，它将重新启用前一个选项.

So for example if name="select1" has selected option "Test 2", then I want "Test 2" to be disabled in both select statements... and if something else gets checked that it re-enables the previous option.

我在这里写了一个示例脚本，以为可以使我接近"……但是这使我与本文相去甚远.任何帮助将不胜感激.

I have written a sample script here to which I thought would get me 'close'... but it's put me far off base here. Any help would be appreciated.

<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>

推荐答案

实时演示: jsfiddle/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'); } }); });

您可能希望使用以下版本的代码:

You may prefer this version of the code:

$('select').change(function() { $(this) .siblings('select') .children('option[value=' + this.value + ']') .attr('disabled', true) .siblings().removeAttr('disabled'); });

实时演示: : jsfiddle. net/dZqEu/2/

请注意，第二个版本是单行代码(一行代码)，但我将其格式化为更具可读性.我更喜欢第二个版本.

Note that this second version is an one-liner (one line of code) but I formatted it to be more readable. I like this second version better.

此外，请注意，我的代码假定这两个SELECT框是DOM兄弟元素.如果不是您这种情况，那么此代码$(this).siblings('select')-将不适用于您，您将不得不使用jQuery的遍历方法跳转到另一个SELECT框.

Also, note that my code assumes that those two SELECT boxes are DOM sibling elements. If that's not your case, then this code - $(this).siblings('select') - will not work for you, and you will have to use jQuery's traversal methods to jump to the other SELECT box.

在最坏的情况下-当SELECT框在DOM树中相距很远，并且遍历效率不高时-您可以为其分配ID属性，并使用此代码选择另一个框:

In the worst-case scenario - when the SELECT boxes are far apart in the DOM tree, and traversing would not be efficient - you can just assign ID attributes to them and use this code to select the other box:

$('#select1, #select2').not(this)

实时演示: : jsfiddle. net/dZqEu/3/