本文介绍如何使用 jquery 实现两个下拉框的联动控制——当用户在第一个下拉框中选择某项后，自动禁用第二个下拉框中值相同的选项，防止重复选择。
在表单设计中，常需确保多个下拉框（<select>）之间不出现重复值选择，例如“负责人”与“备份负责人”不能为同一人。此时可通过 jQuery 监听 change 事件，动态更新另一下拉框中对应 <option> 元素的 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 属性需唯一，示例中两个 <select> 不应同为 id="select2"，建议改为 id="primaryAssignee" 和 id="backupAssignee" 等语义化 ID；
- 禁用的 <option> 仍保留在 DOM 中，仅视觉不可选；若需彻底移除，请改用 .remove()，但需配合撤销逻辑以支持回退。
通过以上方法，即可实现轻量、健壮的双向值互斥控制，提升表单交互合理性与数据准确性。
