asp.net-mvc – 使用JSON结果填充下拉列表 – 使用MVC3,JQuery,Ajax,JSON级联Drop

我有一个级联的drop-drown使用mvc.如果您在第一个下拉列表中选择一个国家/地区,那么第二个国家/地区的状态应该相应地填充.

目前,似乎都很好,我正在收到Json的回应(看到它使用F12工具),它看起来像[{“stateId”：“01”,“StateName”：“arizona”},{“stateId” ：“02”,“州名”：“加州”}等..]

我想知道如何使用这些数据填充我的第二个下拉列表.我的第二个下拉列表的ID是“StateID”.任何帮助将不胜感激.

以下是从服务器生成JSON响应的代码：

[HttpPost]
public JsonResult GetStates(string CountryID)
{
    using (mdb)
    {
        var statesResults = from q in mdb.GetStates(CountryID)
                        select new Models.StatesDTO
                        {
                            StateID = q.StateID,StateName = q.StateName
                        };

        locations.statesList = stateResults.ToList();
    }

    JsonResult result = new JsonResult();

    result.Data = locations.statesList;

    return result;
}

以下是客户端HTML,我的剃刀代码和我的脚本.我想在“成功：”中写入一些代码,以便使用JSON数据填充国家下拉列表.

<script type="text/javascript">
    $(function () {
        $("select#CountryID").change(function (evt) {

            if ($("select#CountryID").val() != "-1") {

                $.ajax({
                    url: "/Home/GetStates",type: 'POST',data: { CountryID: $("select#CountryID").val() },success: function () { alert("Data retrieval successful"); },error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script>

解决方法

然后,在AJAX调用成功函数的内部,您需要创建一系列< option>元素.这可以使用基本的jQuery()函数(或简称为$())来完成.这样会看起来像这样：

$.ajax({
    success: function(states) {
        // states is your JSON array
        var $select = $('#StateID');
        $.each(states,function(i,state) {
            $('<option>',{
                value: state.stateId
            }).html(state.StateName).appendTo($select);
        });
    }
});

这是一个jsFiddle demo.

相关的jQuery文档：

> jQuery.each()
> jQuery()

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!