本文介绍如何使用 jquery 实现两个下拉框（select）之间的联动控制——当用户在任一 dropdown 中选择某项时，自动禁用另一 dropdown 中相同 value 的选项，确保两者无法选中相同值。
在表单设计中，常需保证多个下拉选择器之间值的互斥性（例如“负责人”与“协作者”不能为同一人）。jQuery 提供了简洁高效的 DOM 操作能力，可轻松实现这种实时联动逻辑。
核心思路是：监听所有
以下是完整、健壮的实现代码：
✅ 关键优化说明：
- 使用 $('select.form-control') 精确限定目标元素，避免影响页面其他下拉框；
- 添加空值（value=""）判断，防止默认提示选项被意外禁用；
- 采用属性选择器 option[value="..."] 替代 .filter()，性能更优且语义清晰；
- 调用 .trigger('change') 实现初始化同步，确保页面加载后状态一致；
- 支持任意数量同类 select（如扩展至三个角色选择器），逻辑天然可扩展。
⚠️ 注意事项：
- 所有
- 若需支持多选（
- 在 Vue/React 等框架中，建议改用响应式数据驱动，而非直接操作 DOM 属性。
通过该方案，开发者可在不依赖第三方插件的前提下，以不到 15 行核心逻辑代码，实现专业级的跨下拉框值约束体验。
