本文介绍如何使用 jquery 实现多级下拉框的动态联动逻辑——当用户在任一 `
在表单设计中，常需保证多个下拉选择器（如人员分配、角色绑定等场景）之间值不重复。例如：第一个下拉选了“Shiva”，则第二个下拉中“Shiva”应立即置灰不可选；反之亦然。这种双向联动可通过监听 change 事件并动态操作
✅ 核心实现逻辑
- 监听所有
- 每次触发时，先重置所有
- 遍历每个
- 对其余下拉框（$('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>
<select class="form-control" id="select2">
<option value="">-- 请选择 --</option>
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
<option value="9876543">Rahul</option>
</select>
<select class="form-control" id="select3">
<option value="">-- 请选择 --</option>
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
<option value="9876543">Rahul</option>
</select>
<select class="form-control" id="select4">
<option value="">-- 请选择 --</option>
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
<option value="9876543">Rahul</option>
</select>
</form>
<script>
$(function() {
$('select').on('change', function() {
// 步骤1：清除所有 option 的禁用状态（重置）
$('option').prop('disabled', false);
// 步骤2：遍历每个 select，对其它 select 中同 value 的 option 禁用
$('select').each(function() {
const selectedVal = this.value;
if (!selectedVal) return; // 忽略未选择项（空值）
$('select').not(this).find('option').filter(function() {
return this.value === selectedVal;
}).prop('disabled', true);
});
}).change(); // 初始化：确保首次加载时状态一致
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- ID 唯一性：示例中原始问题存在两个 id="select2"，这违反 HTML 规范，务必确保每个 id 全局唯一（如改为 id="select2"、id="select3"）；
- 空选项处理：建议保留 value="" 的默认提示项（如 -- 请选择 --），并在逻辑中跳过空值判断（如 if (!selectedVal) return;），避免误禁用；
- 兼容性：该方案兼容 jQuery 2.x / 3.x，但不依赖现代 API，适合传统项目；
- 扩展性：如需支持「取消选择即恢复」，当前逻辑已天然支持——因为每次 change 都会重置全部 disabled 并重新计算；
- 无障碍访问：禁用选项仍保留在 DOM 中，屏幕阅读器可识别 aria-disabled，如需更优体验，可额外添加 $(option).attr('aria-disabled', 'true')。
通过以上方案，你可在数行 jQuery 代码内实现健壮、可维护的多下拉联动控制，显著提升表单交互合理性与用户体验。
