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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (53)

如果选项在任何选择中被选中,则尝试禁用该选项。

因此,例如,如果name=“select 1”选择了选项“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>
提问于
用户回答回答于
$('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');

});

请注意,第二个版本是一行(一行代码),但我格式化它是为了提高可读性。我更喜欢第二个版本。

在最坏的情况下--当选择框在DOM树中相距很远且遍历效率不高时,你只需将ID属性分配给它们,并使用以下代码来选择另一个框:

$('#select1, #select2').not(this)
用户回答回答于

试试这个:

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

扫码关注云+社区

领取腾讯云代金券