两级联动Dropdown失效：选国家后城市下拉未填充，请求技术排查

你的两级联动下拉框失效，核心是前端JS代码存在逻辑、语法错误，以下是具体问题和修复方案：

1. 条件判断逻辑错误 #

原代码用||（逻辑或）判断选中值，会导致条件永远为真（比如val为""时，val != -1成立；val为-1时，val != ""成立），应该改为&&（逻辑与）：

if (val !== "" && val !== "-1") {

2. 错误操作国家下拉框选项 #

原代码里$('#CountryId option').not(":first").remove();是删除国家下拉框的选项，完全不符合需求，应该改为清空城市下拉框的非默认选项：

$('#CityId option').not(":first").remove();

（else分支里的同样错误也要同步修正）

3. AJAX配置语法错误 #

URL末尾多了分号，导致JS语法报错，AJAX请求无法发起：
原错误代码：

url: '@Url.Action("GetByCountryId","Home")' + "/" + val;

修正后：

url: '@Url.Action("GetByCountryId","Home")/' + val

4. 未清空城市下拉框旧数据 #

加载新城市前，需要先清空城市下拉框的原有选项，避免重复添加，结合第2点在AJAX请求前执行清空操作。

完整修正后的前端JS代码 #

$('#CountryId').change(function () {
    var val = $(this).val();
    if (val !== "" && val !== "-1") {
        // 清空城市下拉框的非默认选项
        $('#CityId option').not(":first").remove();
        $.ajax({
            method: "GET",
            url: '@Url.Action("GetByCountryId","Home")/' + val
        }).done(function (result) {
            for (var i = 0; i < result.length; i++) {
                var name = result[i].CityName;
                var id = result[i].CityId;
                var option = $('<option></option>');
                option.text(name);
                option.val(id);
                $('#CityId').append(option);
            }
        })
    } else {
        // 清空城市下拉框的非默认选项
        $('#CityId option').not(":first").remove();
    }
})

额外检查点 #

• 确认后端GetByCountryId方法的路由正确，@Url.Action生成的URL可正常访问（可在浏览器控制台查看AJAX请求的状态码和响应内容）。
• 确认Cities.GetFakeCities()返回的数据结构正确，包含CityId和CityName字段，且CountryId匹配逻辑无误。

内容的提问来源于stack exchange，提问作者ALİ AK