本文介绍如何使用 jquery 实现两个下拉框的联动控制——当用户在第一个下拉框中选择某项后，自动禁用第二个下拉框中值相同的选项，防止重复选择。

在表单设计中，常需确保多个下拉框（）之间不出现重复值选择，例如“负责人”与“备份负责人”不能为同一人。此时可通过 jQuery 监听 change 事件，动态更新另一下拉框中对应 元素的 disabled 状态。

以下是一个简洁、可复用的实现方案：

$('select.form-control').on('change', function() {
    // 先重置所有 option 为启用状态（避免残留禁用）
    $('select.form-control option').prop('disabled', false);

    // 遍历每个 select，将其当前选中值作为“冲突值”，在其他 select 中禁用同 value 的 option
    $('select.form-control').each(function() {
        const selectedValue = this.value;
        if (!selectedValue) return; // 忽略未选择（空值）的情况

        // 在其余 select 中查找并禁用 value 相同的 option
        $('select.form-control').not(this).find('option').filter(function() {
            return this.value === selectedValue;
        }).prop('disabled', true);
    });
}).trigger('change'); // 初始化时执行一次，确保页面加载后状态同步

✅ 关键要点说明：

• 使用 .not(this) 排除当前触发事件的下拉框，只影响其他下拉框；
• .filter() 精准匹配 value 属性（而非文本内容），确保数据一致性；
• .trigger('change') 在绑定后立即执行一次，使初始状态（如已有默认选中）也生效；
• 建议为参与联动的下拉框统一添加类名（如 form-control），便于选择器精准控制；
• 若存在多个下拉框（≥3个），该逻辑仍适用，会两两互斥，形成“所选值全局唯一”的约束。

⚠️ 注意事项：

• 确保 jQuery 已正确引入（推荐 2.1+ 或 3.x 版本）；
• id 属性需唯一，示例中两个 不应同为 id="select2"，建议改为 id="primaryAssignee" 和 id="backupAssignee" 等语义化 ID；
• 禁用的 仍保留在 DOM 中，仅视觉不可选；若需彻底移除，请改用 .remove()，但需配合撤销逻辑以支持回退。

通过以上方法，即可实现轻量、健壮的双向值互斥控制，提升表单交互合理性与数据准确性。