本文介绍如何使用 jquery 动态禁用第二个下拉框中与第一个下拉框当前选中值相同的选项，确保两个下拉框不能选择相同项，提升表单交互合理性与数据一致性。
在构建多级关联表单时，常需避免用户在多个下拉框中重复选择同一选项（例如：为不同角色分配不同人员）。以下是一个简洁、健壮的 jQuery 解决方案，实现「当第一个下拉框（#select2）选定某值后，自动禁用第二个下拉框（#select3）中对应 value 相同的
Google Workspace CLI
下载
使用 `gw` CLI 与 Google Workspace（Drive、Docs、Sheets）交互。当需要浏览、读取、创建、搜索或管理 Google Drive 中的文件时使用。
✅ 核心逻辑说明
- 监听所有 select 元素的 change 事件；
- 每次变更后，先重置所有
- 遍历每个下拉框，获取其当前选中值 this.value；
- 对其余下拉框（$('select').not(this)），查找其内部 value 与当前值相等的
- 最后主动触发一次 .change()，确保页面初始化时即应用默认禁用逻辑（如首项已预选）。
? 完整可运行代码示例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form>
<label>第一人选：</label>
<select class="form-control" id="select2">
<option value="">— 请选择 —</option>
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
<br><br>
<label>第二人选（自动排除已选）：</label>
<select class="form-control" id="select3">
<option value="">— 请选择 —</option>
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
</form>
<script>
$(function() {
$('select').on('change', function() {
// 重置所有 option 的禁用状态
$('option').prop('disabled', false);
// 遍历每个 select，将其选中值从其他 select 的选项中禁用
$('select').each(function() {
const selectedVal = this.value;
if (!selectedVal) return; // 忽略未选（空值）
// 在其他 select 中查找并禁用相同 value 的 option
$('select').not(this).find('option').filter(function() {
return this.value === selectedVal;
}).prop('disabled', true);
});
}).change(); // 初始化执行一次，适配默认选中状态
});
</script>
</body>
</html>⚠️ 注意事项
- ID 唯一性：原问题中两个
- 空值处理：添加 if (!selectedVal) return 避免空选项（如提示文字 "— 请选择 —"）触发误禁用；
- 兼容性：代码基于 jQuery 3.x，若使用旧版（如 2.1.1），请确保 prop() 方法可用（推荐 ≥2.0）；
- 扩展建议：如需支持更多下拉框，无需修改逻辑，只需统一添加 class="form-control" 并确保它们被 $('select') 选中即可。
该方案轻量、无侵入性，无需额外插件，适用于各类表单场景，是实现双向互斥选择的理想实践。
