你的位置:首页 > ASP.net教程

[ASP.net教程]asp.net MVC4——省市三级联动


controller:

public ActionResult GetCity(string id)    {      AreaService _areaSvc = new AreaService();      List<SyArea> syAreaList = _areaSvc.GetList(id);      return Json(syAreaList, JsonRequestBehavior.AllowGet);    }        public ActionResult GetCityList()    {      return View();    }

 ,view:

<div>  <select  id="ddlProvince"><option></option></select>  <select  id="ddlCity" name="ddlCity"></select>  <select  name="area_id" id="area_id"></select></div><script type="text/javascript">  //省市联动  $(document).ready(function () {    GetByJquery();    $("#ddlProvince").change(function () { GetCity() });    $("#ddlCity").change(function () { GetDistrict() });  });  function GetByJquery() {    $("#ddlProvince").empty(); //清空省份SELECT控件    var url = "/GetArea/GetCity/" + 0;    $.getJSON(url, function (data) {      $("<option></option>").val('-1')          .text("请选择")          .appendTo($("#ddlProvince"));      $.each(data, function (i, item) {        $("<option></option>")          .val(item["Area_Code"])          .text(item["Area_Name"])          .appendTo($("#ddlProvince"));      });d      GetCity();    });  }  function GetCity() {    $("#ddlCity").empty(); //清空城市SELECT控件    var url = "/GetArea/GetCity/" + $("#ddlProvince").val();    $.getJSON(url, function (data) {      $("<option></option>").val('-1')          .text("请选择")          .appendTo($("#ddlCity"));      $.each(data, function (i, item) {        $("<option></option>")          .val(item["Area_Code"])          .text(item["Area_Name"])          .appendTo($("#ddlCity"));      });      GetDistrict();    });  }  function GetDistrict() {    $("#area_id").empty(); //清空市区SELECT控件    var url = "/GetArea/GetCity/" + $("#ddlCity").val();    $.getJSON(url, function (data) {      $("<option></option>").val('-1')           .text("请选择")           .appendTo($("#area_id"));      $.each(data, function (i, item) {        $("<option></option>")          .val(item["Area_Code"])          .text(item["Area_Name"])          .appendTo($("#area_id"));      });    });  }</script>

效果图: