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

Question

我有一个使用mvc的级联溺水.如果您在第一个下拉列表中选择一个国家/地区,则应该相应地填充第二个国家/地区的州.

目前,一切似乎都很好,我得到Json的回应(看到它使用F12工具),它看起来像 [{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..

我想知道如何填充second-dropdown这些数据.我的第二个下拉列表是" 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数据填充States .

<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()或$("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()

Answer 2

在我的项目中,我正在做这样的事情,如下所示

我的控制员

        public JsonResult State(int countryId)
        {               
            var stateList = CityRepository.GetList(countryId);
            return Json(stateList, JsonRequestBehavior.AllowGet);
        }

在模型中

        public IQueryable<Models.State> GetList(int CountryID)
        {

            var statelist = db.States.Where(x => x.CountryID == CountryID).ToList().Select(item => new State
            {
                ID = item.ID,
                StateName = item.StateName
            }).AsQueryable();
            return statelist;
       }

在视野中

<script type="text/javascript">
    function cascadingdropdown() {
        $("#stateID").empty();
        $("#stateID").append("<option value='0'>--Select State--</option>");
        var countryID = $('#countryID').val();
        var Url="@Url.Content("~/City/State")";
        $.ajax({
            url:Url,
            dataType: 'json',
            data: { countryId: countryID },
            success: function (data) {                
                $("#stateID").empty();
                $("#stateID").append("<option value='0'>--Select State--</option>");
                $.each(data, function (index, optiondata) {                  
                    $("#stateID").append("<option value='" + optiondata.ID + "'>" + optiondata.StateName + "</option>");
                });
            }
        });
    }     
</script>

我想这会对你有所帮助......