ASP.NET MVC使用Ajax实现级联下拉列表传值为undefined问题

提交表单时科目参数为undefined，核心是前端拼接下拉选项的value赋值错误，附带两个影响功能稳定性的小问题：

• Ajax动态拼接科目option时，错误将value属性绑定为row.Class（班级字段），而非科目对应的提交值字段；如果返回数据中不存在对应字段名，value会直接被赋值为undefined，提交时自然拿不到有效值
• 后端接口先执行ToList()把全表数据加载到内存再做筛选，性能差；且未对返回字段做明确投影，容易出现字段名和前端预期不匹配的问题
• 视图中科目下拉初始绑定传入空字符串生成SelectList，会渲染无效的空值选项

1. 调整后端接口代码 #

将筛选逻辑前移到数据库执行，明确返回前端需要的字段，避免字段不匹配问题：

public JsonResult GetStateList(string Class)
{
    // 直接在数据库查询层做筛选，避免全表加载
    var subjectList = context.ClassesWithSubjects_
        .Where(i => i.ClassName == Class)
        .Select(i => new 
        {
            // 替换成你模型中科目对应的唯一标识字段（如SubjectId、SubjectCode，需和PDFSubject字段类型匹配）
            SubjectValue = i.SubjectId,
            SubjectName = i.SubjectName
        })
        .ToList();
    return Json(subjectList, JsonRequestBehavior.AllowGet);
}

2. 修正前端Ajax逻辑 #

切换班级时正确重置下拉框，option的value绑定后端返回的科目值字段：

<script>
$(document).ready(function () {
    $("#PDFClass").change(function () {
        const $subjectSelect = $("#PDFSubject");
        // 清空原有选项，先添加默认提示项
        $subjectSelect.empty().append('<option value="">Please Select</option>');
        const selectedClass = $(this).val();
        // 选中默认"请选择"项时终止请求
        if (!selectedClass) return;

        $.get("/Home/GetStateList", { Class: selectedClass }, function (data) {
            $.each(data, function (index, row) {
                // value绑定科目对应的值字段，不要绑定班级字段
                $subjectSelect.append(`<option value="${row.SubjectValue}">${row.SubjectName}</option>`);
            });
        });
    })
});
</script>

3. 修正视图的下拉初始绑定 #

不要传空字符串生成初始SelectList，改用空的SelectListItem枚举：

<div class="form-group">
    @Html.LabelFor(model => model.PDFSubject, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.PDFSubject, Enumerable.Empty<SelectListItem>(), "Please Select", new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.PDFSubject, "", new { @class = "text-danger" })
    </div>
</div>

修改完成后打开浏览器开发者工具：

• 切换班级时查看Network面板中GetStateList接口的返回值，确认每条数据都包含SubjectValue和SubjectName字段
• 查看Elements面板中动态生成的option标签，确认value属性为正常的科目值，不是undefined
• 选中科目后提交表单，即可正常接收到PDFSubject参数值

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