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

Question

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

例如，如果 name="select1" 选择了选项“Test 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>

Answer 1

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

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

Answer 2

试试这个：

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

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

$(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());
    });
});

Answer 3

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

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

$(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');
  });
});

stored-value 位让您知道在其他 <select> 字段中启用哪些选项。

Answer 4

如果你有超过 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);
    });
});