Javascript ASP.NET MVC5中的级联下拉列表

我正在为一个表单创建两个下拉列表。第一个是区域列表，第二个需要根据所选区域筛选作业类型

我的大部分代码都基于此，但在视图中显示作业类型列表时遇到了困难。我可以看到在调试时添加了正确的选项，但我仍然无法理解为什么它们没有填充作业类型下拉列表

景色

                <!--Area Dropdown-->
                @Html.DropDownList("areas", null , new { @class = "col s12 m6 l3" })

                <!--Job Type Dropdown-->
                @Html.DropDownList("jobType", Enumerable.Empty<SelectListItem>(), "Job Type", new { @class = "col s12 m6 l3" })

控制器内的POST操作

    [HttpPost]
    public ActionResult JobTypeByArea(string area)
    {

        var test = (from a in db.tblJobTypes
                      where a.Active == true && a.Department == area
                      select new
                      {
                          id = a.JobTypeID,
                          job = a.JobType
                      }).ToList();
        return Json(test, JsonRequestBehavior.AllowGet);
    }

最后是JQuery

$(document).ready(function () {   

$('#areas').change(function () {

    $.ajax({
        url: '/Home/JobTypeByArea',
        type: 'POST',
        data: { area: $(this).val() },
        datatype: 'json',
        success: function (data) {
            var options = '';
            var category = $('#jobType');
            $.each(data, function () {
                options += '<option value="' + this.id + '">' + this.job + '</option>';
            });

            $('#jobType').append(options);
        },
    });
});
});

$（文档）.ready（函数（）{
$（“#区域”）。更改（函数（）{
$.ajax({
url:“/Home/JobTypeByArea”，
键入：“POST”，
数据：{area:$（this.val（）}，
数据类型：“json”，
成功：功能（数据）{
var选项=“”；
变量类别=$（“#作业类型”）；
$。每个（数据、函数（）{
选项+=''+此.job+''；
});
$（“#作业类型”）。附加（选项）；
},
});
});
});

需要澄清的是-调试客户端代码时，您会看到调用

success

处理程序，执行

每个
，然后执行
append
，所有这些都没有任何错误。然而，在所有这些之后，下拉列表是空的。是这样吗？在方法
JobTypeByArea（）
中，将返回类型更改为
JsonResult
，而不是
ActionResult
@Andrei Correct。我可以一步一步地浏览代码，并查看每个选项的填充情况。但当我进入页面时，下拉列表是空的。@Eric不幸的是，这并没有解决问题。在发布之前，我已经试过了，只是为了确保我没有遗漏任何东西，但它仍然显示为空白。@0x1F4，太好了。您能否将
options
在第
$（“#jobType”）行前面的值添加到帖子中已执行？需要明确的是-调试客户端代码时，您会看到调用
success
处理程序，并执行
每个
，然后执行
append
，所有这些都没有任何错误。然而，在所有这些之后，下拉列表是空的。是这样吗？在方法
JobTypeByArea（）
中，将返回类型更改为
JsonResult
，而不是
ActionResult
@Andrei Correct。我可以一步一步地浏览代码，并查看每个选项的填充情况。但当我进入页面时，下拉列表是空的。@Eric不幸的是，这并没有解决问题。在发布之前，我已经试过了，只是为了确保我没有遗漏任何东西，但它仍然显示为空白。@0x1F4，太好了。您能否将
options
在第
$（“#jobType”）行前面的值添加到帖子中是否执行？
$(document).ready(function () {   

$('#areas').change(function () {

    $.ajax({
        url: '/Home/JobTypeByArea',
        type: 'POST',
        data: { area: $(this).val() },
        datatype: 'json',
        success: function (data) {
            var options = '';
            var category = $('#jobType');
            $.each(data, function () {
                options += '<option value="' + this.id + '">' + this.job + '</option>';
            });

            $('#jobType').append(options);
        },
    });
});
});