使用JSON结果填充下拉列表-使用MVC3，JQuery，Ajax，JSON级联DropDown

Question

我已经使用mvc进行了级联淹没。就像这样，如果您在第一个下拉列表中选择一个国家，则应该相应地填充第二个国家的状态。

此刻，一切似乎都很好，我得到了Json的响应（使用F12工具看到了它），它看起来像 [{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..

我想知道如何second-dropdown用这些数据填充我的数据。我的第二个下拉菜单的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，我的剃刀代码和我的脚本。我想在“ success：” 内写一些代码，以便它dropdown用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>

Answer 1

首先，内部的一个jQuery事件处理函数this是指触发事件的元素，这样你就可以取代额外调用$("select#CountryID")带$(this)。尽管应该尽可能直接访问元素属性，而不是使用jQuery函数，所以您可以简单地执行this.value而不是$(this).val()or
$("select#CountryID").val()。

然后，在AJAX调用success函数内部，您需要创建一系列<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演示。

相关的jQuery文档：

• jQuery.each()
• jQuery()