C# 如何在MVC5中同步两个DropDownList元素？

我有类别和子类别作为模型。正如你可能猜到的，每个类别都包含许多子类别。关键是我有一个观点，在我看来，我有一个类似这样的代码段：

<div class="form-group">
    @Html.LabelFor(model => model.CategoryID, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("CategoryID", null, "Please select a category",  htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.CategoryID, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.SubcategoryID, "Subcategory", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("SubcategoryID", null, "Please select a subcategory", htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.SubcategoryID, "", new { @class = "text-danger" })
    </div>
</div>

然后我编写了一些AJAX代码，以便使DropDownList元素的值同步。我有以下动作和JS代码

[AllowAnonymous]
public JsonResult GetSubcategories(int id)
{
    var results = db.Subcategories.Where(s => s.CategoryID == id).Select(x => new { id = x.SubcategoryID, value = x.SubcategoryName }).ToList();

    return Json(results, JsonRequestBehavior.AllowGet);
}

带有AJAX调用的JavaScript代码：

$("#CategoryID").change(function () {
    $("#SubcategoryID").empty();

    $.ajax({
        type: 'POST',
        url: '/Account/GetSubcategories',
        dataType: 'json',
        data: { id: $("#CategoryID").val() },
        success: function (subcategories) {
            $.each(subcategories, function (i, subcategory) {
                $("#SubcategoryID").append('<option value="' + subcategory.value + '">' + subcategory.value + '</option>');
            });
        },
        error: function (ex) {
            console.log('Failed to retrieve subcategories! ' + ex);
        }
    });

    return false;
});

$（“#CategoryID”）。更改（函数（）{
$（“#子类别ID”）.empty（）；
$.ajax({
键入：“POST”，
url:“/Account/GetSubcategories”，
数据类型：“json”，
数据：{id:$（“#CategoryID”）.val（），
成功：功能（子类别）{
$。每个（子类别，功能（i，子类别）{
$（“#子类别ID”）.append（“”+subcategory.value+“”）；
});
},
错误：函数（ex）{
console.log（'检索子类别失败！'+ex）；
}
});
返回false；
});

关键是，它同步了DropDownLists，因此每当我选择一个类别时，我只显示该选定类别的子类别。但是，我现在无法提交表单，每当我按submit时，都会收到一条错误消息，说明所选值不是有效的子类别。我怎样才能修好它

编辑：

当我使用开发工具进行一些挖掘时，我看到对于我的类别，对于值部分，我有数字，这是它们在数据库中对应的id，但是现在对于值部分的子类别，我得到一个文本，表示子类别的名称

这个

$("#SubcategoryID").append('<option value="' + subcategory.value + '">' + subcategory.value + '</option>');

$（“#子类别ID”）.append（“”+subcategory.value+“”）；

应该是

$("#SubcategoryID").append('<option value="' + subcategory.id + '">' + subcategory.value + '</option>');

$（“#子类别ID”）.append（“”+subcategory.value+“”）；

您是否在表单提交前看到错误消息？@TiesonT。不，在提交表单之前，视图和控制台中都没有错误。当我提交时，我收到了错误消息，我看到了问题所在，看到了我的编辑。我需要获取子类别的id部分。好的，解决了。我需要将part subcategory.value更改为subcategory.id。

$("#SubcategoryID").append('<option value="' + subcategory.id + '">' + subcategory.value + '</option>');