实现两个Dropdown联动：切换一个时重置另一个为默认值

安全阿岳

2026-5-28

解决两个下拉框互斥重置的问题

我来帮你搞定这个需求！你的目标是让两个下拉框形成互斥：选中其中一个时，另一个自动回到默认的未选择状态，对吧？咱们可以简化逻辑，不用额外的标记类，直接通过值的变化来实现。

你的原始HTML代码

<!-- 第一个下拉框 -->
@Html.DropDownList("Agent_Id", null, "Séléctionnez un élément", htmlAttributes: new { @class = "form-control select2 unselected", required = "Séléctionnez un élément" })
<!-- 第二个下拉框 -->
@Html.DropDownList("TypeEntite_Id", null, "Séléctionnez un élément", htmlAttributes: new { @class = "form-control select2 unselected", required = "Séléctionnez un élément" })

修正后的jQuery实现

// 给所有带unselected类的下拉框绑定change事件
$('.unselected').change(function() {
    // 获取当前下拉框的选中值
    const selectedValue = $(this).val();
    
    // 如果当前下拉框选中了有效选项（不是默认的空值）
    if (selectedValue) {
        // 排除当前下拉框，把其他同类型下拉框重置为默认空值
        // 加上trigger('change')是为了同步Select2插件的UI状态
        $('.unselected').not(this).val('').trigger('change');
    }
});

代码逻辑解释

咱们直接监听下拉框的change事件，不用额外的selected类来标记状态，逻辑更简洁直接。
当某个下拉框选中有效选项时，通过.not(this)排除当前操作的下拉框，将其余下拉框的val设为空——这会直接让它们回到你设置的默认提示选项"Séléctionnez un élément"。
因为你用了Select2插件，手动修改值后需要触发change事件，才能让插件同步更新UI显示，不然可能会出现值已经重置但界面没变化的情况。