首页 > 代码库 > MVC5+Ajax三级联动
MVC5+Ajax三级联动
1、在这里我准备三张表给大家写一个关于三级联动（省，市，区）
2、不多说看代码
controlers代码：
1 public class S_ProvinceController : Controller 2 { 3 private readonly IS_ProvinceService _provinceService; 4 private readonly IS_CityService _cityService; 5 private readonly IS_DistrictService _districtService; 6 public S_ProvinceController(IS_ProvinceService provinceService, IS_CityService cityService, IS_DistrictService districtService) 7 { 8 _cityService = cityService; 9 _provinceService = provinceService;10 _districtService = districtService;11 }12 public ActionResult Index()13 {14 S_ProvinceViewModel model =new S_ProvinceViewModel();15 16 17 model.S_ProvinceSelectList = new List<SelectListItem>();18 model.S_CitySelectList=new List<SelectListItem>();19 model.S_DistrictSelectList = new List<SelectListItem>();20 var province = _provinceService.AllS_Province();21 var provinceSelectList = province.Select(o => new SelectListItem() { Text = o.ProvinceName, Value =http://www.mamicode.com/ o.ProvinceID.ToString() }).ToList();22 provinceSelectList.Insert(0, new SelectListItem() { Text = @"-请选择-", Value = http://www.mamicode.com/"-1" }); 23 model.S_ProvinceSelectList = provinceSelectList; 24 return View(model);25 26 }27 28 public JsonResult GetCity(int id)29 {30 var json = _cityService.AllS_S_City(id);31 json.Insert(0, new S_CityDto() { CityName = @"-请选择-", CityID = -1 });32 return Json(json, JsonRequestBehavior.AllowGet);33 }34 35 public JsonResult GetDistrict(int id)36 {37 var json =_districtService.AllS_District(id);38 json.Insert(0, new S_DistrictDto() { DistrictName = @"-请选择-", DistrictID = -1 });39 return Json(json, JsonRequestBehavior.AllowGet);40 }
3、后面的两个方法都是根据Id查询返回两个json
4、view js写法如下：
1 <script language="javascript"> 2 3 $(function () { 4 5 6 //三级联动 7 $("#provinceId").change(function () { 8 var selec = $(this).val(); 9 var url = "/MagicAdmin/S_Province/GetCity/";10 $("#cityId").find("option").remove();11 $("#districtId").find("option").remove();12 $.getJSON(url + selec, function (data) {13 $.each(data, function (i, item) {14 if (item["CityID"] == "-1") {15 $("<option></option>").val(item["CityID"]).text("-请选择-").appendTo($("#cityId"));16 } else { 17 $("<option></option>").val(item["CityID"]).text(item["CityName"]).appendTo($("#cityId"));18 }19 }); 20 var select2 = $("#cityId").val();21 var url2 = "/MagicAdmin/S_Province/GetDistrict/";22 $("#districtId").find("option").remove();23 $.getJSON(url2 + select2, function (data) {24 $.each(data, function (i, item) {25 if (item["DistrictID"] == "-1") {26 $("<option></option>").val(item["DistrictID"]).text("-请选择-").appendTo($("#districtId"));27 } else {28 $("<option></option>").val(item["DistrictID"]).text(item["DistrictName"]).appendTo($("#districtId"));29 }30 });31 });32 33 });34 }) 35 $("#cityId").change(function () { 36 var select2 = $("#cityId").val();37 var url2 = "/MagicAdmin/S_Province/GetDistrict/";38 $("#districtId").find("option").remove();39 $.getJSON(url2 + select2, function (data) {40 $.each(data, function (i, item) {41 if (item["DistrictID"] == "-1") {42 $("<option></option>").val(item["DistrictID"]).text("-请选择-").appendTo($("#districtId"));43 } else {44 $("<option></option>").val(item["DistrictID"]).text(item["DistrictName"]).appendTo($("#districtId"));45 }46 });47 });48 49 })50 })51 </script>
5、html代码如下
@Html.DropDownListFor(q => q.provinceId, Model.S_ProvinceSelectList)
@Html.DropDownListFor(q => q.cityId, Model.S_CitySelectList,"-请选择-")
@Html.DropDownListFor(q => q.districtId, Model.S_DistrictSelectList,"-请选择-")
6、效果：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。