Question

我在＆＃34;创建＆＃34;中得到了一个级联下拉列表视图，在选择第一个下拉列表#regions后，第二个下拉列表#districts将呈现该区域中的区域列表。

我如何退回＆＃34;区＆＃34;数据库中的值到＆＃34;编辑＆＃34;中的#districts下拉列表查看首次加载时？我只能显示我的区域值，但区域值为空白。

我的代码问题是＆＃34;区＆＃34;下拉列表仅在＆＃34; Region＆＃34;下拉列表已更改/选中。

我搜索了很多关于此的帖子，但所有人都在谈论如何制作级联下拉列表，但不显示来自数据库的数据。

在编辑控制器：

中

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

Answer 1

我不知道为什么会有人为我的问题投票而不是提供帮助或想法。无论如何，我找到了解决它的方法。希望这可以帮助别人。

在javascript中，我只是从模型中获取传递给视图的区域ID。

var selectedDistrict = @Model.DistrictID;

然后在$.each函数中，我创建一个条件语句，将保存的区域设为selected：

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

然后它就像一个魅力。

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

1 个答案: