用JQuery做出三级联动

分享别人的东西：

城市：

public class City     {         public int ID { get; set; }         public int pID { get; set; }         public string Name { get; set; }     }

地区：

public class District     {         public int ID { get; set; }         public int cID { get; set; }         public string Name { get; set; }     }

省份：

 public class Province     {         public int ID { get; set; }         public string Name { get; set; }     }

 

后台控制器代码：AjaxController：

 1  public class AjaxController : Controller
 2         {
 3             //
 4 // GET: /Ajax/ 
 5 
 6             /// <summary>
 7 /// 获取所有［省份］数据
 8 /// </summary>
 9             public ActionResult GetProvinceList()
10             {
11                 if (!Request.IsAjaxRequest())
12                 {
13                     return Content("请不要非法方法,这是不道德的行为！");
14                 }
15                 var provinces = new List<Province>();
16                 provinces.Add(new Province { ID = 1, Name = "安徽" });
17                 provinces.Add(new Province { ID = 2, Name = "浙江" });
18                 return Json(provinces, JsonRequestBehavior.AllowGet);
19             }
20 
21             /// <summary>
22 /// 获取某［省份］的所有［城市］数据
23 /// </summary>
24             public ActionResult GetCityList(int id)
25             {
26                 if (!Request.IsAjaxRequest())
27                 {
28                     return Content("请不要非法方法,这是不道德的行为！");
29                 }
30                 var cities = new List<City> { 
31                     new City { ID = 1, pID = 1, Name = "宿州" } ,
32                     new City { ID = 2, pID = 1, Name = "淮北" },
33                     new City { ID = 3, pID = 2, Name = "杭州" },
34                     new City { ID = 4, pID = 2, Name = "南京" }
35                 };
36                  var cities_ = new List<City>();
37                 foreach (var item in cities)
38                 {
39                     if (item.pID == id)
40                     { cities_.Add(item); }
41                 }
42                 return Json(cities_, JsonRequestBehavior.AllowGet);
43             }
44 
45             /// <summary>
46 /// 获取某［城市］的所有［市区］数据
47 /// </summary>
48             public ActionResult GetDistrictList(int id)
49             {
50                 if (!Request.IsAjaxRequest())
51                 {
52                     return Content("请不要非法方法,这是不道德的行为！");
53                 }
54 
55                 var districts = new List<District> {
56                 new District { ID = 1, cID = 1, Name = "A" },
57                 new District { ID = 2, cID = 1, Name = "B" },
58                 new District { ID = 3, cID = 2, Name = "C" },
59                 new District { ID = 4, cID = 2, Name = "D" },
60                 new District { ID = 5, cID = 3, Name = "E" },
61                 new District { ID = 6, cID = 3, Name = "F" },
62                 new District { ID = 7, cID = 4, Name = "G" },
63                 new District { ID = 8, cID = 4, Name = "H" }
64                 };
65                 var districts_ = new List<District>();
66                    foreach (var item in districts)
67                 {
68                     if (item.cID == id)
69                     { districts_.Add(item); }
70                 }
71                 return Json(districts_, JsonRequestBehavior.AllowGet);
72             }
73 
74         }

 

最后是视图：

 1 <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 2 <script src="http://www.cnblogs.com/Scripts/AJAX.js" type="text/javascript"></script>
 3 <table>
 4         <tr>
 5             <td>
 6                 <select id="ddlProvince"  name="ddlProvince" />
 7             </td>
 8             <td>
 9                 <select id="ddlCity" name="ddlCity" />
10             </td>
11             <td>
12                 <select id="ddlDistrict"  name="ddlDistrict"/>
13             </td>
14         </tr>
15 </table>

其中：AJAX.js代码：

 1 $(document).ready(function () {
 2     GetByJquery();
 3     $("#ddlProvince").change(function () { GetCity() });
 4     $("#ddlCity").change(function () { GetDistrict() });
 5 });
 6 
 7 function GetByJquery() {
 8 
 9     $("#ddlProvince").empty(); //清空省份SELECT控件 
10 
11     $.getJSON("/Ajax/GetProvinceList", function (data) {
12         $.each(data, function (i, item) {
13             $("<option></option>")
14                     .val(item["ID"])
15                     .text(item["Name"])
16                     .appendTo($("#ddlProvince"));
17         });
18         GetCity();
19     });
20 
21 }
22 
23 function GetCity() {
24 
25     $("#ddlCity").empty(); //清空城市SELECT控件
26     var url = "/Ajax/GetCityList/" + $("#ddlProvince").val();
27     $.getJSON(url, function (data) {
28         $.each(data, function (i, item) {
29             $("<option></option>")
30                     .val(item["ID"])
31                     .text(item["Name"])
32                     .appendTo($("#ddlCity"));
33         });
34         GetDistrict();
35     });
36 }
37 
38 function GetDistrict() {
39     $("#ddlDistrict").empty(); //清空市区SELECT控件
40     var url = "/Ajax/GetDistrictList/" + $("#ddlCity").val();
41 
42     $.getJSON(url, function (data) {
43         $.each(data, function (i, item) {
44             $("<option></option>")
45                     .val(item["ID"])
46                     .text(item["Name"])
47                     .appendTo($("#ddlDistrict"));
48         });
49     });
50 }

 

posted @ 2012-01-29 13:44  徐文峰  阅读(275)  评论(0)    收藏  举报