Jquery MVC级联dropdownlist onchange加载另一个dropdownlist和partialview

我正在尝试创建级联dropdownlists，其中用户选择Country dropdownlist，然后根据所选国家填充第二个dropdownlist中的州。我已经用下面的代码设法做到了这一点。但是，当用户选择一个国家时，如何返回一个包含一些其他数据的局部视图，其中包含要绑定到States dropdownlist的州列表

让我来解释一下。我有3个下拉列表（国家、州、城市）。加载页面时，将填充countries dropdownlist。当用户选择USA时。我希望用所有美国州填充States dropdownlist，但也返回一个局部视图，该视图将显示所选美国国家的一些信息，如人口和国会大厦。当用户选择一个州（例如：德克萨斯州）时。我想用德克萨斯州的所有城市填充Cities dropdownlist，并返回一个包含其他数据的视图。级联就像一棵树的向下钻取。由于一些限制，我不能使用树。因此，我在做这个级联下拉列表。这可能吗

public JsonResult CountryList()
    {
        List<Country> countries = Country.GetCountries();
        return Json(countries, JsonRequestBehavior.AllowGet);
    }

    public JsonResult StateList(string CountryCode)
    {
        List<State> states = State.GetStates().Where(x => x.CountryCode == CountryCode).ToList();
        return Json(states, JsonRequestBehavior.AllowGet);
    }



<script type="text/javascript">
$(document).ready(function () {
    $.getJSON("/Home/CountryList", null, function (data) {
        var items = "<option>Select Country</option>";
        $.each(data, function (i, item) {
            items += "<option value=" + item.CountryCode + ">" + item.CountryName + "</option>";
        });
        $("#Countries").html(items);
    });

    $("#Countries").change(function () {
        var Param = { CountryCode: $("#Countries > option:selected").attr("value") };
        $.getJSON("/Home/StateList/", Param, function (data) {
            var items = "<option>Select State</option>";
            $.each(data, function (i, state) {
                items += "<option value=" + state.StateID + ">" + state.StateName + "</option>";
            });
            $("#States").html(items);
        });
    });
});

public JsonResult CountryList（）
{
List countries=Country.GetCountries（）；
返回Json（国家，JsonRequestBehavior.AllowGet）；
}
公共JsonResult状态列表（字符串CountryCode）
{
List states=State.GetStates（）.Where（x=>x.CountryCode==CountryCode.ToList（）；
返回Json（states，JsonRequestBehavior.AllowGet）；
}
$（文档）.ready（函数（）{
$.getJSON（“/Home/CountryList”），null，函数（数据）{
var items=“选择国家”；
$。每个（数据、功能（i、项）{
items+=“”+item.CountryName+“”；
});
$（“#国家”）.html（项目）；
});
美元（“#国家”）。变化（功能）{
var Param={CountryCode:$（“#Countries>option:selected”）.attr（“value”）}；
$.getJSON（“/Home/StateList/”，参数，函数（数据）{
var items=“选择状态”；
$。每个（数据、函数（i、状态）{
items+=“”+state.StateName+“”；
});
$（“#States”）.html（项目）；
});
});
});

---

我认为没有一个好方法可以做到这一点。但是，您始终可以返回部分视图，并将项目数据放在隐藏字段中，或者返回包含所有项目的JSON以及可以应用于页面的html字符串。就我个人而言，我不喜欢这些选择

为什么通过一个请求获取项目和部分视图如此重要？为什么不发出两个ajax请求呢？第一个用于获取项目（您已经拥有它），第二个用于获取您的局部视图。您可以使用JQuery GET方法轻松地完成它。代码应该如下所示：

$.get( "Controller/Action", { param1: "value1" } )
  .done(function( data ) {
    $('#infoContainer').html(data);
  });

---

通过这种方式，您可以保持代码干净、简单且易于理解，因为您有一个操作可以获取下拉项，还有一个操作可以获取所选项的描述

为什么需要返回局部视图？你应该提供更多的细节，因为你的问题令人困惑抱歉。我已经试着在上面解释过了。@AnhLun你好，你没有对我的回答做任何评论，只是想知道它是否对你有帮助？如果没有，我能做些什么来帮助你回答你的问题吗？