如何基於javascript jquery中的另一個下拉項選擇生成dropdownlist項目？

Question

我在這裏發現了類似的問題，但那些是服務器端代碼，而我想要使用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); 
} 

Javascript代碼的數據綁定到DropDownList的

$("#ddlDepartment").change(function() { 
    var id = $("#ddlDepartment option:selected").val(); 
    GetEmployeeByDepartmentId(id); 
}); 

function GetEmployeeByDepartmentId(id) { 
    var postData = { 
    departmentId: id 
    }; 

    $.ajax('/Leave/GetEmployeesByDepartment', { 
    method: 'GET', 
    dataType: 'JSON', 
    data: postData, 
    async: false, 

    success: function (response) { 

     $.each(response, function() { 
     $("#ddlEmployee").append(
      $('<option/>', { 
      value: this, 
      html: this 
      }) 
     ); 
     }); 
    } 
    }); 
} 

我也在裏面下方嘗試了「成功「功能，但這也不起作用。

if (response == false) { 
    alert("No Employee found for this department"); 
} else { 
    $("#ddlEmployee").html = ""; 
    response.each(function(index, item) { 
    $("#ddlEmployee").append("<option value='item.Key'>item.Value </option>"); 
    }); 
} 

所建議

C＃代碼在JSON格式返回數據編輯的代碼

public JsonResult GetEmployeesByDepartment(int departmentId) 
{ 
    var employees = new EmployeeInfoRepository().GetEmployeesByDepartmentId(departmentId); 
    return Json(employees, JsonRequestBehavior.AllowGet); 
} 

Javascript代碼（成功唯一功能）

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); 
    }); 
} 

調用「成功」函數並返回一個對象數組。但是，這些數據仍然沒有綁定到「ddlEmployee」中。

最終解決
目前這樣用下面代碼 -

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

Answer 1

不知道爲什麼你返回一個字典。我假設EmployeeID是唯一的，這樣就可以簡化爲：

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); 
});