标签：style blog color java os io for ar
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 = o.ProvinceID.ToString() }).ToList(); 22 provinceSelectList.Insert(0, new SelectListItem() { Text = @"-请选择-", Value = "-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、效果：
标签：style blog color java os io for ar
原文地址：http://www.cnblogs.com/androw/p/3907970.html
