Second Dropdownlist is not filtering

Question

I am making an application , that allows the user to select a service from a list of services and an employee from a list of employees. When a user selects a service , the dropdownlist for the employees must automatically filter to show the employees that can perform that service or have that skill. For example if a customer selects a haircut , only employees whose skill is a haircut must filter into the dropdown list. I will show you my code , note : i do not want to create a relationship between service and employee.

The first dropdownlist is populating but not the second dropdownlist. Please view my code below

    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>

Answer 1

This is where I think you need to make changes base on the data in your db.

Your db has ServiceName and not the ServiceId, so change this line new SelectList(ServiceList, "ServiceID", "ServiceName"); to new SelectList(ServiceList, "ServiceName", "ServiceName");

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

}