MVC4使用ajax省市级联,MVC4使用ajax异步提交并实现数据展示,MVC省市级联,ajax省市级联

  • 实现效果

QQ截图20151006154357.jpg

  • 页面jQuery代码

$(function ()
        {
           //省份select
            $("#province").change(function ()
            {
                //省份ID
                var provinceId = $(this).val();
                if (provinceId!=null)
                {
                    $.ajax({
                        url: "/House/GetCityByprovinceId",
                        type: "post",
                        dataType: 'json',//必须json
                        data: { provinceId: provinceId },
                        success: function (data) {
                            //判断获取过来的市
                            if(data!=null)
                            {
                                //清空市的select
                                $("#City").html("");
                                //循环赋值
                                for (var i = 0; i < data.length; i++) {
                                    $("#City").append("<option value=" + data[i].CityId + ">" + data[i].Name + "</option>");
                                }
                            } else
                            {
                                //默认选项
                                $("#City").html("<option  selected='selected' value='0'>请选择</option>");
                            }
                        }
                    });
                }
            });
            //$("#province").find("option").eq(2).attr("selected", "selected").click();
        });
  • 控制器代码

        public JsonResult GetCityByprovinceId(int provinceId) 
        {
            List<City> cList=null;
            //判断省份Id
            if (provinceId!=0)
            {
                cList = houseManager.GetCity(provinceId);
            }

            return Json(cList,JsonRequestBehavior.AllowGet);        
        }