本文介绍如何使用 jquery 动态禁用第二个下拉框中与第一个下拉框当前选中值相同的选项，确保两个下拉框不能选择相同项，提升表单交互合理性与数据一致性。
在构建多级关联表单时，常需避免用户在多个下拉框中重复选择同一选项（例如：为不同角色分配不同人员）。以下是一个简洁、健壮的 jQuery 解决方案，实现「当第一个下拉框（#select2）选定某值后，自动禁用第二个下拉框（#select3）中对应 value 相同的
✅ 核心逻辑说明
- 监听所有 select 元素的 change 事件；
- 每次变更后，先重置所有
- 遍历每个下拉框，获取其当前选中值 this.value；
- 对其余下拉框（$('select').not(this)），查找其内部 value 与当前值相等的
- 最后主动触发一次 .change()，确保页面初始化时即应用默认禁用逻辑（如首项已预选）。
? 完整可运行代码示例
⚠️ 注意事项
- ID 唯一性：原问题中两个
- 空值处理：添加 if (!selectedVal) return 避免空选项（如提示文字 "— 请选择 —"）触发误禁用；
- 兼容性：代码基于 jQuery 3.x，若使用旧版（如 2.1.1），请确保 prop() 方法可用（推荐 ≥2.0）；
- 扩展建议：如需支持更多下拉框，无需修改逻辑，只需统一添加 class="form-control" 并确保它们被 $('select') 选中即可。
该方案轻量、无侵入性，无需额外插件，适用于各类表单场景，是实现双向互斥选择的理想实践。
