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 = 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查询返回两个json4、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、效果：

MVC5+Ajax三级联动,布布扣,bubuko.com