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

jQuery <select> option disabled if selected in other <select>

提问by Justin

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

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

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.

因此，例如，如果 name="select1" 选择了选项“Test 2”，那么我希望在两个 select 语句中都禁用“Test 2”……如果检查其他内容以重新启用前一个选项。

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>

回答by ?ime Vidas

Live demo:http://jsfiddle.net/dZqEu/

现场演示：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');   
        }
    });

});

---

---

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');

});

Live demo:http://jsfiddle.net/dZqEu/2/

现场演示：http ://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.

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

---

---

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 兄弟元素。如果这不是你的情况，那么这段代码 - $(this).siblings('select')- 对你不起作用，你将不得不使用 jQuery 的遍历方法跳转到另一个 SELECT 框。

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:

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

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

Live demo:http://jsfiddle.net/dZqEu/3/

现场演示：http ://jsfiddle.net/dZqEu/3/

回答by Chandu

Try this:

尝试这个：

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
}); 

In case you want to enable a previously disabled option (when the value is unselected from other combo), use this enchanced version:

如果您想启用以前禁用的选项（当该值未从其他组合中选择时），请使用此增强版本：

$(document).ready(function () {
    $("select").change(function () {
        var $this = $(this);
        var prevVal = $this.data("prev");
        var otherSelects = $("select").not(this);
        otherSelects.find("option[value=" + $(this).val() + "]").attr('disabled', true);
        if (prevVal) {
            otherSelects.find("option[value=" + prevVal + "]").attr('disabled', false);
        }

        $this.data("prev", $this.val());
    });
});

回答by Orbling

The problem with your code is that within the change()routine, you are looking at all of the selects, rather than the one that has changed and disabling all of the selected entries. You need to find the value of the selected entry in question and disable that in otherselects, not the current one.

您的代码的问题在于，在change()例程中，您正在查看所有选择，而不是已更改并禁用所有选定条目的选择。您需要找到有问题的所选条目的值，并在其他选择中禁用该值，而不是当前选择。

Something like this may be of use [untested]:

像这样的东西可能有用[未经测试]：

$(document).ready(function() {
  $("select").each(function(cSelect) {
    $(this).data('stored-value', $(this).val());
  });

  $("select").change(function() {
    var cSelected = $(this).val();
    var cPrevious = $(this).data('stored-value');
    $(this).data('stored-value', cSelected);

    var otherSelects = $("select").not(this);

    otherSelects.find('option[value=' + cPrevious + ']').removeAttr('disabled');
    otherSelects.find('option[value=' + cSelected + ']').attr('disabled', 'disabled');
  });
});

The stored-valuebit is so you know which options to enable in other <select>fields.

该stored-value位是让你知道在其他启用的选项<select>字段。

回答by dryobs

If you have more than 2 select :

如果您有 2 个以上选择：

$('select').on('change', function() {
    $('select option').removeAttr('disabled');
    $('select').each(function(i, elt) {
        $('select').not(this).find('option[value="'+$(elt).val()+'"]').attr('disabled', true);
    });
});