本文介绍如何使用 jquery 实现两个下拉框（select）之间的联动控制——当用户在任一 dropdown 中选择某项时，自动禁用另一 dropdown 中相同 value 的选项，确保两者无法选中相同值。
在表单设计中，常需保证多个下拉选择器之间值的互斥性（例如“负责人”与“协作者”不能为同一人）。jQuery 提供了简洁高效的 DOM 操作能力，可轻松实现这种实时联动逻辑。
核心思路是：监听所有
以下是完整、健壮的实现代码：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<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() {
// 步骤1：全局启用所有选项（清除历史禁用状态）
$('select.form-control option').prop('disabled', false);
// 步骤2：对每个 select，禁用其他 select 中 value 相同的选项
$('select.form-control').each(function() {
const selectedVal = this.value;
// 跳过未选择（空值）的情况，避免误禁用空选项
if (!selectedVal) return;
// 查找除当前 select 外的所有 select，并禁用其对应 value 的 option
$('select.form-control').not(this)
.find('option[value="' + selectedVal + '"]')
.prop('disabled', true);
});
}).trigger('change'); // 初始化时执行一次，同步初始状态
});
</script>✅ 关键优化说明：
- 使用 $('select.form-control') 精确限定目标元素，避免影响页面其他下拉框；
- 添加空值（value=""）判断，防止默认提示选项被意外禁用；
- 采用属性选择器 option[value="..."] 替代 .filter()，性能更优且语义清晰；
- 调用 .trigger('change') 实现初始化同步，确保页面加载后状态一致；
- 支持任意数量同类 select（如扩展至三个角色选择器），逻辑天然可扩展。
⚠️ 注意事项：
- 所有
- 若需支持多选（
- 在 Vue/React 等框架中，建议改用响应式数据驱动，而非直接操作 DOM 属性。
通过该方案，开发者可在不依赖第三方插件的前提下，以不到 15 行核心逻辑代码，实现专业级的跨下拉框值约束体验。
