看起来你遇到的问题是：只有第一个下拉框选中选项时，其他下拉框的对应选项会被禁用，但操作第二个或第三个下拉框时，之前选中的选项不会同步禁用。这是因为你的原代码只处理了当前触发change事件的下拉框的选中值，没有收集所有已选中的选项集合，导致之前的选中项没有被纳入禁用逻辑。

修正后的代码逻辑 #

我们需要每次任何一个下拉框变化时，先收集所有已选中的选项值，再遍历所有选项，把「属于已选中集合但不是当前下拉框自身选中值」的选项禁用。这样就能实现所有已选选项在其他下拉框中被禁用的效果。

完整的jQuery代码如下：

$(".selectClass").change(function() {
    // 收集所有下拉框已选中的值，转成数组
    var selectedValues = $(".selectClass").map(function() {
        return $(this).val();
    }).get();
    
    // 先重置所有选项的禁用状态
    $("select option").prop("disabled", false);
    
    // 遍历每个选项，判断是否需要禁用
    $("select option").each(function() {
        var $option = $(this);
        var parentSelectVal = $option.closest("select").val();
        
        // 如果当前选项的值在已选中集合里，且不是所在下拉框自己选中的值，就禁用
        if (selectedValues.includes($option.val()) && $option.val() !== parentSelectVal) {
            $option.prop("disabled", true);
        }
    });
});

代码细节解释 #

• 收集已选中值：用.map()遍历所有.selectClass下拉框，获取它们的val()，再用.get()把jQuery对象转成普通数组，这样我们就有了所有已被选中的选项值集合。
• 重置禁用状态：每次触发change事件时，先把所有选项的disabled设为false，避免之前的禁用状态残留。
• 判断禁用逻辑：遍历每个选项，检查它的值是否在已选中集合里，同时确保它不是所在下拉框当前选中的选项（不然自己的选中项会被禁用），满足条件就设置disabled: true。

完整的页面代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<select class="selectClass">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<select class="selectClass">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<select class="selectClass">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<script>
$(".selectClass").change(function() {
    var selectedValues = $(".selectClass").map(function() {
        return $(this).val();
    }).get();
    
    $("select option").prop("disabled", false);
    
    $("select option").each(function() {
        var $option = $(this);
        var parentSelectVal = $option.closest("select").val();
        
        if (selectedValues.includes($option.val()) && $option.val() !== parentSelectVal) {
            $option.prop("disabled", true);
        }
    });
});
</script>

这样修改后，不管你操作哪一个下拉框，所有已被选中的选项都会在其他下拉框中被禁用，完美实现你想要的互斥效果~

内容的提问来源于stack exchange，提问作者user9224632