本文介绍如何使用 jquery 实现两个下拉框的动态联动逻辑——当用户在第一个下拉框中选择某项时，自动禁用第二个下拉框中值相同的选项，防止重复选择。
在表单设计中，常需避免用户在多个关联下拉框中重复选择同一数据（例如“负责人”与“协作者”不能为同一人）。借助 jQuery 的事件监听与 DOM 操作能力，可轻松实现这一交互逻辑。
核心思路是：监听所有
以下为完整、健壮的实现代码：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
<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 为可用状态（避免残留禁用）
$('select.form-control').find('option').prop('disabled', false);
// 遍历每个 select，将其当前选中值从其他 select 的选项中禁用
$('select.form-control').each(function() {
const selectedVal = this.value;
if (!selectedVal) return; // 忽略未选择（空值）情况
// 对除自身外的所有 select，禁用其 value 匹配的 option
$('select.form-control').not(this).find('option').filter(function() {
return this.value === selectedVal;
}).prop('disabled', true);
});
}).change(); // 初始化时同步状态
});
</script>✅ 关键优化说明：
- 使用 $('select.form-control') 精准限定作用范围，避免影响页面其他下拉框；
- 添加空值（""）判断，防止未选择时误禁全部选项；
- 初始调用 .change() 确保页面加载后状态即生效（如服务端已预设默认值）；
- filter() + prop('disabled', true) 组合语义清晰、性能良好，兼容主流浏览器。
⚠️ 注意事项：
- 若下拉框选项由 AJAX 动态加载，请在数据渲染完成后手动触发一次 $('#select2, #select3').trigger('change')；
- 如需支持多选（
- 建议配合 CSS 添加禁用选项的视觉提示（如 option:disabled { color: #999; }）以提升用户体验。
该方案简洁、可复用，适用于任意数量同构下拉框间的互斥选择控制。
