本文介绍如何通过 jquery 动态禁用第二个下拉框中与第一个下拉框当前选中值相同的选项，实现两组下拉菜单间的值互斥控制，确保用户无法在两个下拉框中选择相同项。
在表单开发中，常需限制多个下拉框（<select>）之间不能选择重复值——例如「负责人」与「备份负责人」不能为同一人。jQuery 提供了简洁高效的 DOM 操作能力，可轻松实现该逻辑。
核心思路是：监听所有下拉框的 change 事件，当任一 <select> 值改变时，遍历其余下拉框，将其内部与当前选中值（this.value）相等的 <option> 元素设为 disabled；同时，为避免残留禁用状态，每次触发前先重置所有 <option> 的 disabled 属性为 false。
以下是完整、健壮的实现代码：
Media.io Google Veo Video Generator
下载
通过Media.io OpenAPI，使用您的API密钥调用Google Veo 3.1，将文本或图像生成电影级AI视频。
<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>
$(document).ready(function() {
$('select.form-control').on('change', function() {
// 1. 先解除所有 option 的禁用状态（确保初始/重置逻辑正确）
$('option').prop('disabled', false);
// 2. 遍历每个 select 元素
$('select.form-control').each(function() {
const selectedVal = this.value;
// 3. 跳过当前触发 change 的 select，对其它 select 中匹配 value 的 option 禁用
if (selectedVal) { // 忽略空选项（如提示占位符），提升用户体验
$('select.form-control').not(this).find('option').filter(function() {
return this.value === selectedVal;
}).prop('disabled', true);
}
});
}).trigger('change'); // 初始化时执行一次，确保默认状态正确
});
</script>✅ 关键优化说明：
- 使用 $('select.form-control') 精确限定目标元素，避免影响页面其他下拉框；
- 添加空值判断 if (selectedVal)，防止 -- 请选择 -- 占位符触发误禁用；
- 末尾 .trigger('change') 实现页面加载后自动初始化状态（例如已有默认选中值时同步禁用对应项）；
- 采用 prop('disabled', true/false) 而非 attr()，符合现代 jQuery 最佳实践（disabled 是属性而非特性）。
⚠️ 注意事项：
- 若下拉框动态加载选项（如通过 AJAX），需在数据注入后再次调用 .trigger('change') 或重新绑定逻辑；
- 如需支持多组独立互斥下拉框（如 A/B 一组、C/D 一组），应按组添加特定 class 并修改选择器（如 .group-1 select）；
- 在移动端或无障碍场景中，建议配合 aria-disabled 和视觉样式（如灰显）增强可访问性。
该方案轻量、可复用，适用于任意数量的互斥下拉框组合，是构建专业表单交互的基础技巧之一。
