Javascript 将子类别数据从数据库显示到级联下拉列表

我在我的创建视图中得到了一个级联下拉列表，在选择第一个下拉区域后，第二个下拉区域将呈现该区域中的区域列表

首次加载时，如何将DB中的District值返回到编辑视图中的districts下拉列表？我只能显示我的区域值，但区域值为空

我的代码的问题是，仅当更改/选择区域下拉列表时，才会填充区域下拉列表

我搜索了很多关于这个的帖子，但是他们都在谈论如何制作一个级联下拉列表，而不是显示数据库中的数据

在编辑控制器中：

在编辑视图中：

---

我不知道为什么会有人投票支持我的问题，而不是提供帮助或想法。无论如何，我想办法解决它。希望这能帮助其他人

在javascript中，我只是从传递给视图的模型中获取DistrictID

var selectedDistrict=@Model.DistrictID

然后，在$.each函数中，我生成一条条件语句，以使保存的区域成为选中区域：

---

然后它就像一个符咒。

很简单！在选择区域下拉列表时，尝试进行不同的AJAX调用，并在区域下拉列表中显示值。@Ashraf.Shk786不确定如何在AJAX中的$中选择每个函数。AJAX调用如何知道地区id？您的实现存在多个问题，您甚至还没有显示视图代码，我建议您查看@StephenMuecke，谢谢链接。我刚刚知道怎么做了。请随意评论。然而，这一观点只是简单明了。上面我在视图中使用的javascript对于我认为的问题更为重要。强烈建议你研究我给你的链接。你可能认为你的自我回答会解决你眼前的问题，但它不好，没有解决所有其他问题。you have nice work@Matt这肯定会在将来帮助别人。而且，那些投票反对你的问题的人，我认为他/她认为这个问题不是吉尼，或者是一个你可以自己找到解决方案的简单问题。所以，不用担心，不要误入歧途，在你在社区发布任何东西之前，尽你最大的努力，用不同的可能性找到解决方案。感谢这些人，正是因为他们，你才能够独立完成这项工作，当然也感谢他们的辛勤工作：-

var item = await _context.Items
           .Include(i => i.District)
           .SingleOrDefaultAsync(i => i.ID == id);

var model = new ViewModel { Title = item.Title, RegionID = item.District.RegionID, DistrictID = item.DistrictID };

List<Region> regions = new List<Region>();
regions = await _context.Regions.ToListAsync();
regions.Insert(0, new Region { ID = 0, Name = "-- Select a region --" });
List<District> districts = new List<District>();

ViewBag.RegionList = new SelectList(regions, "ID", "Name");
ViewBag.DistrictList = new SelectList(districts, "ID", "Name");

return View(model);

<script type="text/javascript">
$(function () {
    if ($("#regions").val() == '0') {
        var districtDefaultValue = "<option value=''>-- Select a district --</option>";
        $("#districts").html(districtDefaultValue).show();
    }

    $("#regions").change(function () {
        var selectedItemValue = $(this).val();

        var ddlDistrict = $("#districts");
        $.ajax({
            cache: false,
            type: "GET",
            url: '@Url.Action("GetDistrictByRegionId", "Items")',
            data: { "id": selectedItemValue },
            success: function (data) {
                ddlDistrict.html('');
                $.each(data, function (id, option) {
                    ddlDistrict.append($('<option></option>').val(option.id).html(option.name));
                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Error occurred in loading corresponding districts.');
            }
        });
    });
});

$.each(data, function (id, option) {
    if (option.id == selectedDistrict) {
        ddlDistrict.append($('<option selected="selected"></option>').val(option.id).html(option.name));
    } else {
        ddlDistrict.append($('<option></option>').val(option.id).html(option.name));
    }
});