
本文介绍如何通过 jquery 监听下拉框变更事件,动态禁用另一下拉框中与当前选中值相同的选项,确保两个下拉框不会同时选中同一项。
在构建表单时,常需保证多个下拉框之间的选择互斥——例如用户在第一个下拉框中选择了“Shiva”,则第二个下拉框中对应“Shiva”的选项应自动禁用(不可选),反之亦然。这种交互能有效防止逻辑冲突,提升用户体验。
实现该功能的核心思路是:监听所有
以下是完整、可直接运行的 jQuery 解决方案:
✅ 关键说明:
- 使用 .not(this) 确保只影响其他下拉框,不干扰自身;
- .filter(function() { return this.value === selectedValue; }) 实现精确值匹配(注意是严格相等 ===);
- 初始调用 .trigger('change') 可在页面加载后立即同步禁用逻辑,避免首次操作前出现无效选项;
- 建议为
- 若下拉框含重复 value 或需支持多选/分组,请扩展逻辑(如结合 data-id 属性增强唯一性)。









