MVC中设置DEPT_ID=2为下拉框默认值及关联TEST_ID筛选

1. 设置DEPT_ID下拉列表默认选中值为2 #

后端（Create Action） #

在Create Action中构造部门下拉列表的SelectList时，指定选中值为2：

public ActionResult Create()
{
    // 从数据库获取部门数据
    var departments = db.Departments.ToList();
    // 构造SelectList，默认选中DEPT_ID=2的项
    ViewBag.DeptList = new SelectList(departments, "DEPT_ID", "DEPT_NAME", 2);
    
    // 其他业务逻辑
    return View();
}

前端（Create View） #

使用强类型或非强类型方法渲染下拉列表：

@* 强类型写法（假设Model包含DEPT_ID属性） *@
@Html.DropDownListFor(m => m.DEPT_ID, (SelectList)ViewBag.DeptList, "请选择部门", new { @id = "deptDropdown" })

@* 非强类型写法 *@
@Html.DropDownList("DEPT_ID", (SelectList)ViewBag.DeptList, "请选择部门", new { @id = "deptDropdown" })

页面加载完成后，DEPT_ID=2的选项会自动成为选中项。

2. 选中DEPT_ID=2时联动加载对应部门的测试项目 #

后端（新增接口Action） #

添加一个用于根据部门ID获取测试项目的接口，返回JSON格式的下拉选项数据：

public ActionResult GetTestsByDept(int deptId)
{
    // 筛选归属目标部门的测试项目
    var departmentTests = db.Tests.Where(t => t.DEPT_ID == deptId).ToList();
    // 转换为下拉列表需要的键值对格式
    var testOptions = departmentTests.Select(t => new 
    {
        Value = t.TEST_ID.ToString(),
        Text = t.TEST_NAME
    });
    return Json(testOptions, JsonRequestBehavior.AllowGet);
}

前端（Create View） #

引入jQuery并添加联动逻辑，同时渲染测试项目下拉列表：

@* 引入jQuery，路径根据项目实际情况调整 *@
<script src="~/Scripts/jquery.min.js"></script>

@* 测试项目下拉列表，初始为空 *@
@Html.DropDownListFor(m => m.TEST_ID, new SelectList(Enumerable.Empty<SelectListItem>()), "请选择测试项目", new { @id = "testDropdown" })

<script>
$(function() {
    // 页面加载时，若默认选中DEPT_ID=2，自动加载对应测试项目
    var initialDeptId = $("#deptDropdown").val();
    if (initialDeptId == 2) {
        loadTestOptions(initialDeptId);
    }

    // 监听部门下拉列表的变化事件
    $("#deptDropdown").change(function() {
        var selectedDeptId = $(this).val();
        if (selectedDeptId == 2) {
            // 选中DEPT_ID=2时加载对应测试项目
            loadTestOptions(selectedDeptId);
        } else {
            // 其他部门选中时清空测试项目下拉列表
            $("#testDropdown").empty().append('<option value="">请选择测试项目</option>');
        }
    });

    // 封装加载测试项目的AJAX函数
    function loadTestOptions(deptId) {
        $.ajax({
            url: '@Url.Action("GetTestsByDept", "YourController")', // 替换为实际控制器名称
            type: 'GET',
            data: { deptId: deptId },
            success: function(data) {
                var $testDropdown = $("#testDropdown");
                $testDropdown.empty();
                $testDropdown.append('<option value="">请选择测试项目</option>');
                // 遍历数据添加下拉选项
                $.each(data, function(index, item) {
                    $testDropdown.append(`<option value="${item.Value}">${item.Text}</option>`);
                });
            },
            error: function() {
                alert("加载测试项目失败，请重试");
            }
        });
    }
});
</script>

补充说明 #

• 代码中的YourController需要替换为项目实际的控制器名称
• 若需要其他部门选中时也加载对应项目，可移除if (selectedDeptId == 2)判断，直接调用loadTestOptions(selectedDeptId)
• 确保数据库中Tests表存在DEPT_ID外键，与部门表关联

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