如何基于JavaScriptjQuery中的另一个下拉项选择生成下拉列表项？

我在这里发现了类似的问题，但这些都是服务器端代码，而我想使用javascript和jquery。下面是代码

C#以JSON格式返回数据的代码

public JsonResult GetEmployeesByDepartment(int departmentId)
{
  var employees = new EmployeeInfoRepository().GetEmployeesByDepartmentId(departmentId);
  var employeeDictionary = new Dictionary<int, string>();

  foreach (var emp in employees)
  {
    if(!employeeDictionary.ContainsKey(emp.EmployeeID))
    {
      employeeDictionary.Add(emp.EmployeeID, emp.FullName);
    }
  }

  return Json(employeeDictionary, JsonRequestBehavior.AllowGet); 
}

if (response == null) {
  alert("No Employee found for this department");
} else {
    $.each(response, function () {
       var option = $('<option></option>');
         option.val(response.EmployeeID);
         option.text(response.FullName);
         $("#ddlEmployee").append(option);
    });
}  

Javascript代码（仅限成功函数）

public JsonResult GetEmployeesByDepartment(int departmentId)
{
  var employees = new EmployeeInfoRepository().GetEmployeesByDepartmentId(departmentId);
  var employeeDictionary = new Dictionary<int, string>();

  foreach (var emp in employees)
  {
    if(!employeeDictionary.ContainsKey(emp.EmployeeID))
    {
      employeeDictionary.Add(emp.EmployeeID, emp.FullName);
    }
  }

  return Json(employeeDictionary, JsonRequestBehavior.AllowGet); 
}

if (response == null) {
  alert("No Employee found for this department");
} else {
    $.each(response, function () {
       var option = $('<option></option>');
         option.val(response.EmployeeID);
         option.text(response.FullName);
         $("#ddlEmployee").append(option);
    });
}  

if（响应==null）{
警报（“未找到该部门的员工”）；
}否则{
$。每个（响应、函数（）{
var选项=$（''）；
option.val（response.EmployeeID）；
option.text（response.FullName）；
$（“#ddleemployee”）。追加（可选）；
});
}  

调用“Success”函数并返回一个对象数组。但是，数据仍然没有绑定到“ddleemployee”中

最终解决方案
目前正在使用以下代码执行此操作-

$("#ddlEmployee").empty();
$.each(response, function (key, value) {
  $("#ddlEmployee").append('<option value=' + value.EmployeeID + '>' + value.FullName + '</option>');
});

$（“#ddleemployee”）.empty（）；
$。每个（响应、功能（键、值）{
$（“#ddleemployee”）.append（“”+value.FullName+“”）；
});

不确定您为什么要返回词典。我假设

EmployeeID

是唯一的，因此可以简化为：

var employees = new EmployeeInfoRepository()
  .GetEmployeesByDepartmentId(departmentId)
  .Select(e => new
  {
    ID = e.EmployeeID,
    Name = e.FullName
  }
return Json(employees, JsonRequestBehavior.AllowGet); 

和在脚本中（成功函数）

$。每个（响应，函数（）{
var选项=$（''）；
option.val（response.ID）；
option.text（response.Name）；
$（“#ddleemployee”）。追加（可选）；
});

您是否检查了调用success并且jquery找到了#ddleemployee？为什么要返回一个

字典

？试试这个$（#ddleemployee”）.append（新选项（item.Key，item.Value））@StephenMuecke，我不明白如何从返回的对象数组绑定数据，这就是为什么要用Dictionary@Beatles1692，是，调用Success。调用Success函数并返回一个对象数组。但是，数据仍然没有绑定到“ddleemployee”中。您确定您有一个带有

id=“ddleemployee”

的

？只是在我的项目中用一些虚拟数据对它进行了测试-它工作得很好。您的代码中肯定还有其他问题-在调用ajax方法之前是否清除了现有选项？（如“$”（“#ddleemployee”）.empty（）；）

var employees = new EmployeeInfoRepository()
  .GetEmployeesByDepartmentId(departmentId)
  .Select(e => new
  {
    ID = e.EmployeeID,
    Name = e.FullName
  }
return Json(employees, JsonRequestBehavior.AllowGet); 

$.each(response, function() {
  var option = $('<option></option>');
  option.val(response.ID);
  option.text(response.Name);
  $("#ddlEmployee").append(option);
});