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

发布时间：2020-12-15 23:05:47 所属栏目：asp.Net 来源：网络整理

导读：我有一个级联的drop-drown使用mvc.如果您在第一个下拉列表中选择一个国家/地区,那么第二个国家/地区的状态应该相应地填充. 目前,似乎都很好,我正在收到Json的回应(看到它使用F12工具),它看起来像[{“stateId”：“01”,“StateName”：“arizona”},{“state

我有一个级联的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>

解决方法

首先,在jQuery事件处理函数内部,这是指触发事件的元素,因此您可以用$(this)替换$(“select#CountryID”)的其他调用.尽管在可能的情况下,您应该直接访问元素属性,而不是使用jQuery函数,因此您可以简单地执行this.value而不是$(this).val()或$(“select#CountryID”).val().

然后,在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.