第二个下拉列表不过滤(Second Dropdownlist is not filtering)

我想提出一个应用程序，它允许用户选择从服务列表的服务，并从员工列表员工。当用户选择服务，为员工下拉列表必须自动过滤，以显示能够执行该服务，或具有技能的员工。例如，如果一个客户选择一个发型，只有员工他的能力是一个理发必须过滤到下拉列表中。我会告诉你我的代码，请注意：我不想创建服务和员工之间的关系。

第一个下拉列表中填充但不是第二个下拉列表。请在下面查看我的代码

    public class Service
{
    [Key]
    public string ServiceID { get; set;}
    public string ServiceName { get; set;}
    public string Description { get; set;}
    public double Price { get; set;}
 }


 public class Employee
{
    [Key]
    public string EmpID { get; set;}
    public string EmpName { get; set;}
    public string Skills { get; set;}

}

 public class Cascade
{
    [Key]
    public int cKey { get; set;}
    public string ServiceRequried { get; set;}
    public string EmployeeRequired { get; set;}


}

 public ActionResult Index3()
    {
        List<Service> ServiceList = db.Services.ToList();
        ViewBag.ServiceList = new SelectList(ServiceList, "ServiceID", "ServiceName");
        return View();

    }
    public JsonResult GetEmpList2(string ServiceRequired)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<Employee> EmpList = db.Employees.Where(x => x.Skills == ServiceRequired).ToList();
        return Json(EmpList, JsonRequestBehavior.AllowGet);

    }

 @model SkillScheduling2.Models.Cascade

 @{
ViewBag.Title = "Index3";
 }

 <h2>Index3</h2>

 <br /><br />

<div class="form-group">
    @if (ViewBag.ServiceList != null)
    {
        @Html.DropDownListFor(model => model.ServiceRequried, ViewBag.ServiceList as SelectList, "--Select Service--", new { @class = "form-control" })
    }
</div>



 <div class="form-group">
@Html.DropDownListFor(model => model.EmployeeRequired, new SelectList(" "), "--Select Employee--", new { @class = "form-control" })

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script>
     $(document).ready(function () {
    $("#ServiceRequired").change(function () {
        $.get("/Home/GetEmpList2", { ServiceRequired: $("#ServiceRequired").val() }, function (data) {
            $("#EmployeeRequired").empty();
            $.each(data, function (index, row) {
                $("#EmployeeRequired").append("<option value='" + row.EmpID + "'>" + row.EmpName + "</option>")
            });
        });
    })
});
 </script>

这是我认为你需要做出改变的基础上在你的数据库中的数据。

你的数据库具有ServiceName ，而不是ServiceId ，所以改变这一行新的SelectList（ServiceList，“服务ID”，“服务名称”）; 到新的SelectList（ServiceList “服务名称”， “服务名”）;

public ActionResult Index3()
{
    List<Service> ServiceList = db.Services.ToList();
    ViewBag.ServiceList = new SelectList(ServiceList, "ServiceName", "ServiceName");
    return View();

}