ASP.NET Core MVC中Bootstrap模态框级联下拉框失效问题

问题根源 #

模态框里的下拉框是动态生成的，页面初始加载时这些元素还未出现在DOM中，原来用$(document).ready直接绑定的change事件无法找到目标元素，因此无法触发级联逻辑。

直接可行的修改方案 #

把事件绑定改成事件委托，让存在于初始DOM中的父元素（比如document）监听动态元素的事件，具体修改前端脚本如下：

@section Scripts {
<script>
    // 用事件委托绑定change事件，兼容动态生成的元素
    $(document).on('change', '#GradeDropdown', function () {
        var gradeId = $(this).val();
        // 精准定位当前年级下拉对应的班级下拉框，避免多实例冲突
        var $classroomDropdown = $(this).closest('.form-group').next().find('#classroom-dropdown');

        if (gradeId) {
            $.ajax({
                url: '@Url.Action("GetClassroomByGrade", "Students")?gradeId=' + gradeId,
                type: 'GET',
                success: function (data) {
                    $classroomDropdown.empty();
                    $classroomDropdown.append('<option value="" selected disabled>Select Classroom</option>');
                    $.each(data, function (index, classroom) {
                        $classroomDropdown.append('<option value="' + classroom.id + '">' + classroom.name + '</option>');
                    });
                },
                error: function () {
                    console.log("加载班级列表出错");
                }
            });
        } else {
            $classroomDropdown.empty();
            $classroomDropdown.append('<option value="" selected disabled>Select Classroom</option>');
        }
    });
</script>
}

额外注意事项 #

• 避免ID重复：如果页面存在多个模态框，或同一ID在DOM中重复出现，会导致选择器混乱。要么确保#GradeDropdown和#classroom-dropdown全局唯一，要么改用类选择器配合模态框容器ID定位，比如$('#studentModal .grade-dropdown')。
• 验证AJAX请求：打开浏览器控制台，检查AJAX请求是否发送成功、后端返回的JSON数据格式是否正确，确保GetClassroomByGrade接口能正常返回对应年级的班级列表。
• 适配动态加载的模态框：如果模态框内容是通过AJAX加载的，事件委托的方式依然有效，无需额外绑定事件。

后端代码确认 #

你的后端GetClassroomByGrade方法逻辑无问题，只要确保_db.Classrooms能正确查询到对应年级的班级，返回的JSON格式为{id: xxx, name: xxx}即可正常工作。

内容的提问来源于stack exchange，提问作者Lune lune