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

Question

I have categories and subcategories as model. And each category includes many subcategories as you may have guessed. The point is that I have a view, and in my view I have a code segment like this one:

<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>

Then, in my controller, I have two ViewBag objects, which populate my SelectList objects:

ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");
ViewBag.SubcategoryID = new SelectList(db.Subcategories, "SubcategoryID", "SubcategoryName");

Then I wrote some AJAX code, in order to make the values of the DropDownList elements to synchronize. I have the following action and JS code.

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

JavaScript code with the AJAX call:

$("#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;
});

The point is that, it synchronized the DropDownLists, so whenever I select a category, I only shows subcategories for that selected category. But, I'm not able to submit my form now, whenever I press submit, I get an error message saying that the selected value is not a valid Subcategory. How can I fix it?

EDIT:

When I did some digging with the developer tools, I saw that for my Categories, for the value part I have numbers, which are their corresponding id in the database, but now for my Subcategories for the value part I get a text, meaning the name of the Subcategory.

Answer 1

This

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

should be

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