ASP.NET MVC （+ Jquery） 实现省级地市的下拉框数据联动

 

  引入js文件： <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>

 

View:

<%= Html.DropDownList("ddlProvince", (SelectList)ViewData["Province"],"=省份=")%>

 <%= Html.DropDownList("ddlCity")%>

 <%= Html.DropDownList("ddlArea")%>

 

 

 

<script type="text/javascript">

    $(document).ready(function() {

        $("#ddlProvince").change(function() {  GetCity($(this).val());});

        $("#ddlCity").change(function() { GetArea($(this).val());});

    });

 

   function GetCity(p) {

      $("#ddlCity").html("");   //清空市区SELECT控件

      $("#ddlArea").html("");

      $("#ddlCity").append("<option value='0' selected='selected'>=市区=</option>");

      $("#ddlArea").append("<option value='0' selected='selected'>=县区=</option>");

 

      $.ajax({

 type: "GET",

 url: "/EasyArea/GetCityList/",  //EasyArea是当前View的文件夹名称，GetCityList是Controller中的方法；

 data: "p=" + p,

 dataType: "json",

 success: function(json)

 {

 if (json.length > 0) 

 {

 for (var i = 0; i < json.length; i++) 

 {

$("#ddlCity").append("<option value='"+json[i].Value+"'>"+json[i].Text+"</option>");

 }

 }

 }

      });

    }

 

function GetArea(a) {

    $("#ddlArea").html(""); //清空市区SELECT控件

    $("#ddlArea").append("<option value='0' selected='selected'>=县区=</option>");

 

      $.ajax({

 type: "GET",

 url: "/EasyArea/GetCityList/",     //EasyArea是当前View的文件夹名称，GetCityList是Controller中的方法；

 data: "p=" + a,

 dataType: "json",

 success: function(json)

 {

 if (json.length > 0) 

 {

 for (var i = 0; i < json.length; i++) 

 {

$("#ddlArea").append("<option value='"+json[i].Value+"'>"+json[i].Text+"</option>");

 }

 }

 }

      });

    }

</script>

 

Controller：

ViewData["Province"] = GetProvinceList();  //加载控件数据

 

 /// <summary>

        /// 获取所有省份

        /// </summary>

        /// <param name="ProvinceID"></param>

        /// <returns></returns>

        private SelectList GetProvinceList()

        {

            List<Easy_Area> ProvinceList = easyArea.FindAll().Where(p => p.Area_Level == 0).ToList();

 

            SelectList pList = new SelectList(ProvinceList, "ID", "Area_Name");

            return pList;

        }

 

 

        /// <summary>

        /// 获取某［省份］的所有［城市］数据

        /// </summary>

        ///

// 这里接收传过来的省id,再查询数据库，将此省的城市查询出来,然后生成Json格式数据并return

        public ActionResult GetCityList(string p)   

        {

            if (p.IndexOf("-") != -1)

            {

                Guid _id = new Guid(p);

 

                List<Easy_Area> modellist = easyArea.FindAll().Where(c => c.FID == _id).ToList();

 

                SelectList pList = new SelectList(modellist, "ID", "Area_Name");

 

                return Json(pList);

 

            }

            else

            {

                return View("Error");

            }

        }