Populate second Droplist depending on values of first Droplist - asp.net-mvc

Question

How can I change the selection of a second drop down list depending on the first selected dropdown value? For example in the code below if the listDepartments is "Sales" I only want the choice for listCatagory droplist to be Customers, and when selecting HR I only want the choice to be "Resumes" Is this possible with the code below or do I need a new approach, and if so is there a good example somewhere?
Thanks,
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",
});
When selecting the department is does nothing.
OK I added this to my controller:
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"));
}
But I am not sure where it get the data for data: { id: $("#droplist_Departments_ID").val() }, from??
Do I need to change way the droplist is for the departments?
listDepartments.Add(new SelectListItem
{
Text = "Customer Service",
Value = "CustomerService",

Answer 1

You'll have to use Javascript in order to make an Ajax request passing the previous droplist selected item to a method in the controller which will return a SelectList, something like this:
$.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);
}
});
In the controller something like (adapt to your db schema, obviously):
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"));
}