如何使用 jQuery 实现级联下拉框的互斥选择（避免重复值）

本文介绍如何通过 jquery 动态禁用第二个下拉框中与第一个下拉框当前选中值相同的选项，实现两组下拉菜单间的值互斥控制，确保用户无法在两个下拉框中选择相同项。

在表单开发中，常需限制多个下拉框（）之间不能选择重复值——例如「负责人」与「备份负责人」不能为同一人。jquery 提供了简洁高效的 dom 操作能力，可轻松实现该逻辑。

核心思路是：监听所有下拉框的 change 事件，当任一 值改变时，遍历其余下拉框，将其内部与当前选中值（this.value）相等的 元素设为 disabled；同时，为避免残留禁用状态，每次触发前先重置所有 的 disabled 属性为 false。

以下是完整、健壮的实现代码：

 
        -- 请选择负责人 --     Shiva     Disha            -- 请选择备份负责人 --     Shiva     Disha    
  

✅ 关键优化说明：

• 使用 $(‘select.form-control’) 精确限定目标元素，避免影响页面其他下拉框；
• 添加空值判断 if (selectedVal)，防止 — 请选择 — 占位符触发误禁用；
• 末尾 .trigger(‘change’) 实现页面加载后自动初始化状态（例如已有默认选中值时同步禁用对应项）；
• 采用 prop(‘disabled’, true/false) 而非 attr()，符合现代 jQuery 最佳实践（disabled 是属性而非特性）。

⚠️ 注意事项：

• 若下拉框动态加载选项（如通过 ajax），需在数据注入后再次调用 .trigger(‘change’) 或重新绑定逻辑；
• 如需支持多组独立互斥下拉框（如 A/B 一组、C/D 一组），应按组添加特定 class 并修改选择器（如 .group-1 select）；
• 在移动端或无障碍场景中，建议配合 aria-disabled 和视觉样式（如灰显）增强可访问性。

该方案轻量、可复用，适用于任意数量的互斥下拉框组合，是构建专业表单交互的基础技巧之一。