ASP.NET Core编辑页面级联下拉框回显StateId/CityId问题

要实现编辑页面自动选中对应州和城市，需在加载完下拉选项后，根据当前Airport的StatesId和CitiesId设置选中状态，具体步骤如下：

1. 在视图中存储当前Airport的ID值 #

在编辑视图的表单内添加隐藏字段，保存当前要编辑的Airport对应的州和城市ID：

<input type="hidden" id="currentStateId" value="@Model.StatesId" />
<input type="hidden" id="currentCityId" value="@Model.CitiesId" />

2. 修改jQuery代码，添加自动选中逻辑 #

修正原代码中的大小写错误（$(Document)改为$(document)），并在加载完选项后设置选中状态：

$(document).ready(function () {
    $('#state').attr('disabled', true);
    $('#city').attr('disabled', true);
    // 获取当前要编辑的州和城市ID
    var currentStateId = $('#currentStateId').val();
    var currentCityId = $('#currentCityId').val();

    LoadStates(currentStateId, currentCityId);

    $('#state').change(function () {
        var statesId = $(this).val();
        if (statesId > 0) {
            LoadCities(statesId, currentCityId)
        }
        else {
            alert("Please select a state!");
            $('#city').empty();
            $('#city').attr('disabled', true);
            $('#city').append('<option>---Select a City---</option>');
        }
    })
});

function LoadStates(currentStateId, currentCityId) {
    $('#state').empty();

    $.ajax({
        url: '/Airports/GetStates',
        success: function (response) {
            if (response != null && response != undefined && response.length > 0) {
                $('#state').attr('disabled', false);
                $('#state').append('<option>---Select a State---</option>');
                $('#city').append('<option>---Select a City---</option>');
                $.each(response, function (i, data) {
                    $('#state').append('<option value='+data.id+'>'+data.name +'</option>')
                });

                // 设置州的选中状态
                if (currentStateId > 0) {
                    $('#state').val(currentStateId);
                    // 触发change事件加载对应城市
                    $('#state').trigger('change');
                }

            }
            else {
                $('#state').attr('disabled', false);
                $('#city').attr('disabled', false);
                $('#state').append('<option>---State Not Available---</option>');
                $('#city').append('<option>---City Not Available---</option>');
            }
        },
        error: function (error) {
            alert(error);
        }
    });
}

function LoadCities(statesId, currentCityId) {
    $('#city').empty();

    $.ajax({
        url: '/Airports/GetCities?Id=' + statesId,
        success: function (response) {
            if (response != null && response != undefined && response.length > 0) {
                $('#city').attr('disabled', false);
                $('#city').append('<option>---Select a City---</option>');
                $.each(response, function (i, data) {
                    $('#city').append('<option value=' + data.id + '>' + data.name + '</option>')
                });

                // 设置城市的选中状态
                if (currentCityId > 0) {
                    $('#city').val(currentCityId);
                }

            }
            else {
                $('#city').attr('disabled', false);
                $('#city').append('<option>---City Not Available---</option>');
            }
        },
        error: function (error) {
            alert(error);
        }
    });
}

3. 控制器代码无需修改 #

原控制器的GetStates和GetCities方法逻辑正常，保持不变即可。

内容的提问来源于stack exchange，提问作者Nesar Azimi