本文介绍如何通过 jquery 监听下拉框变更事件，动态禁用另一下拉框中与当前选中值相同的选项，确保两个下拉框不会同时选中同一项。
在构建表单时，常需保证多个下拉框之间的选择互斥——例如用户在第一个下拉框中选择了“Shiva”，则第二个下拉框中对应“Shiva”的选项应自动禁用（不可选），反之亦然。这种交互能有效防止逻辑冲突，提升用户体验。
实现该功能的核心思路是：监听所有
以下是完整、可直接运行的 jQuery 解决方案：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
<select class="form-control" id="select2">
<option value="">-- 请选择 --</option>
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
<select class="form-control" id="select3">
<option value="">-- 请选择 --</option>
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
</form>
<script>
$(function() {
$('select.form-control').on('change', function() {
// 先重置所有 option 的 disabled 状态（便于后续精准控制）
$('select.form-control option').prop('disabled', false);
// 遍历每个 select，对其它 select 中匹配 value 的 option 禁用
$('select.form-control').each(function() {
const selectedValue = this.value;
if (!selectedValue) return; // 忽略未选择状态
// 查找「非当前 select」中的 option，并禁用 value 匹配项
$('select.form-control').not(this)
.find('option')
.filter(function() {
return this.value === selectedValue;
})
.prop('disabled', true);
});
}).trigger('change'); // 初始化时执行一次，确保初始状态正确
});
</script>✅ 关键说明：
- 使用 .not(this) 确保只影响其他下拉框，不干扰自身；
- .filter(function() { return this.value === selectedValue; }) 实现精确值匹配（注意是严格相等 ===）；
- 初始调用 .trigger('change') 可在页面加载后立即同步禁用逻辑，避免首次操作前出现无效选项；
- 建议为
- 若下拉框含重复 value 或需支持多选/分组，请扩展逻辑（如结合 data-id 属性增强唯一性）。
该方案简洁健壮，兼容主流浏览器，适用于任意数量的互斥下拉框场景，是前端表单约束控制的实用范式。
