根据第一个Droplist的值填充第二个Droplist

时间:2019-07-25 13:53:03

标签: asp.net-mvc

如何根据第一个选定的下拉值来更改第二个下拉列表的选择?例如在下面的代码中,如果listDepartments是“ Sales”,我只希望listCatagory下拉列表的选择是“ Customers”,而选择HR时,我只希望选择“ Resumes”,那么下面的代码是否可行?或者我需要一种新方法,如果可以的话,有什么好的例子吗?

谢谢, EB

                        List<SelectListItem> listDepartments = new List<SelectListItem>();



                            listDepartments.Add(new SelectListItem
                        {
                            Text = "Sales",
                            Value = "Sales",

                        });
                            listDepartments.Add(new SelectListItem
                        {
                            Text = "HR",
                            Value = "HR"
                        });



                        List<SelectListItem> listCatagory = new List<SelectListItem>();
                            listCatagory.Add(new SelectListItem
                        {
                            Text = "Customers",
                            Value = "Customers",

                        });
                        listCatagory.Add(new SelectListItem
                        {
                            Text = "Resumes",
                            Value = "Resumes",
                        });

选择部门时不执行任何操作。 好的,我将其添加到我的控制器中:

                    public JsonResult GetCategory(int id)
                    {
                        var department = db.Documents.Where(t => t.ID == id).FirstOrDefault();

                        return Json(new SelectList(db.Catagories.Where(t => (t.Department == department.Department)), "Category", "Text"));
                    }

但是我不确定它从何处获取数据数据:{id:$(“#droplist_Departments_ID”)。val()},来自??

我是否需要更改部门的下拉列表的方式?

                listDepartments.Add(new SelectListItem
            {
                Text = "Customer Service",
                Value = "CustomerService",

1 个答案:

答案 0 :(得分:1)

您必须使用Javascript才能发出Ajax请求,以将先前的下拉列表选定项传递到控制器中的方法,该方法将返回SelectList,如下所示:

$.ajax({
    type: 'POST',
    url: 'GetCategory',
    dataType: 'json',
    data: { id: $("#droplist_Departments_ID").val() },
    success: function (mems) {
        // states contains the JSON formatted list
        // of states passed from the controller
        $.each(mems, function (i, member) {
            $("#droplist_Category_ID").append('<option value="' + member.Value + '">' + member.Text + '</option>');
        });
    },
    error: function (ex) {
        console.log('Failed to retrieve states. Exception: ' + ex);
    }
});

在控制器中类似(显然,它适合于您的数据库模式):

public JsonResult GetCategory(int id)
{
    var department = db.Departments.Where(t => t.Id == id).FirstOrDefault();

    return Json(new SelectList(db.Categories.Where(t => (t.DepartmentId == department.Id)), "CategoryId", "Text"));
}