使用JQuery AJAX的MVC级联下拉列表

时间:2016-11-21 17:33:43

标签: jquery ajax asp.net-mvc

我有美国各州的下拉列表。当用户选择状态时,将填充另一个县/ parrish的下拉列表。我正在从存储过程中提取信息以填充县下拉列表。我遇到的问题是它为每个县返回对象Object,我不知道如何纠正这个问题。

这是控制器中的代码

public ActionResult FillCountyList(string State)
{
    Models.CountyList mod = new CountyList();
    mod.TheState = State;
    List<ListCountiesByState_Result> Counties = mod.ListCounties();
    return Json(Counties, JsonRequestBehavior.AllowGet);
}    

我还在我的控制器中尝试了以下操作,它还返回一个列表,显示每个县的对象

public JsonResult FillCountyList(string State)
{
    IEnumerable<SelectListItem> Counties = db.ListCountiesByState(State).Select(c => new SelectListItem {
            Value = c.County,
            Text = c.County
    }).ToList();
    return Json(Counties, JsonRequestBehavior.AllowGet);
}

以下是视图中的jquery代码

$('#State').change(function () {
    var stateid = $('#State').val();
    $.ajax({
        url: '/Profile/BackgroundData/FillCountyList',
        type: 'GET',
        datatype: 'JSON',
        data: { State: stateid },
        success: function (result) {
            $('#CountyOrParrish').html('');
            $('#CountyOrParrish').append($('<option>Make Selection</option>'));
            $.each(result, function (i, item) {
                $('#CountyOrParrish').append($('<option></option>').text(item));
            });
        }
    });
});

2 个答案:

答案 0 :(得分:0)

您只需使用“。”即可在javascript上访问您的县属性。分隔符,因为结果中的每个项都是一个json对象:

$.each(result, function (i, item) {
           $('#CountyOrParrish').append($('<option></option>').text(item.CountyName));
        });

答案 1 :(得分:0)

检查您的方法是否正确返回国家/地区。也改变:

$('<option></option>').text(item));

为:

$('<option></option>').val(item.Value).html(item.Text));