省市区三级联动

HTML

 1 所属省：
 2             <span class="select-box inline">
 3                 <select id="Select1" size="1" style=" 100Px">
 4                     <option value="0">请选择</option>
 5                 </select>
 6             </span>
 7                 所属市：
 8             <label class="select-box inline">
 9                 <select id="Select2" name="CityID" style=" 100Px">
10                     <option value="0">请选择</option>
11                 </select></label>
12                 所属区：
13             <label class="select-box inline">
14                 <select id="Select3" name="AreID" style=" 100Px">
15                     <option value="0">请选择</option>
16                 </select></label>

Javascrip

 1 //转换参数为“参数1|参数2|参数3...”的形式
 2 //arjun ajax 页面函数调用形式
 3 function encodeAjaxParam() {
 4     var str = "";
 5     for (var i = 0; i < arguments.length; i++) {
 6         str += arguments[i] + "|";
 7     }
 8     if (str != "") {
 9         str = str.substring(0, str.length - 1);
10     }
11     return str;
12 }
13 var proid = parseInt('$!ProID', 0); //获取后台输出的省Id
14 var cityid = parseInt('$!CityID', 0); //获取后台输出的市Id
15 var areaid = parseInt('$!AreaID', 0); //获取后台输出的区县Id
16 function GetProvinceList() {
17     $("#Select1").html("<option value="0">请选择</option>");
18     $("#Select2").html("<option value="0">请选择</option>");
19     $("#Select3").html("<option value="0">请选择</option>");
20     jQuery.post("/AJAX/ajax_handlerNew.ashx", {
21         fn: "GetAreaByParentId",
22         param: encodeAjaxParam(0)
23     },
24     function(data) {
25         var json = new Function("return " + data)();
26         var option = "<option value="0">请选择</option>";
27         for (var i = 0; i < json.length; i++) {
28             var AreaID = json[i].AreaID;
29             var AreaName = json[i].AreaName;
30             option += "<option value="" + AreaID + "">" + AreaName + "</option>"
31         }
32         $("#Select1").html(option);
33         $("#Select1").val(proid);
34         if (proid > 0) {
35             GetCityList();
36         }
37     });
38 }
39 function GetCityList() {
40 
41     $("#Select2").html("<option value="0">请选择</option>") $("#Select3").html("<option value="0">请选择</option>");
42     var ParentId = $("#Select1").val();
43     if (ParentId == 0) {
44         return;
45     }
46     jQuery.post("/AJAX/ajax_handlerNew.ashx", {
47         fn: "GetAreaByParentId",
48         param: encodeAjaxParam(ParentId)
49     },
50     function(data) {
51         var json = new Function("return " + data)();
52         var option = "<option value="0">请选择</option>";
53         for (var i = 0; i < json.length; i++) {
54             var AreaID = json[i].AreaID;
55             var AreaName = json[i].AreaName;
56             option += "<option value="" + AreaID + "">" + AreaName + "</option>"
57         }
58         $("#Select2").html(option);
59         $("#Select2").val(cityid);
60         if (cityid > 0) {
61             GetAreaList();
62         }
63 
64     });
65 }
66 function GetAreaList() {
67     $("#Select3").html("<option value="0">请选择</option>") var ParentId = $("#Select2").val();
68     if (ParentId == 0) {
69         return;
70     }
71     jQuery.post("/AJAX/ajax_handlerNew.ashx", {
72         fn: "GetAreaByParentId",
73         param: encodeAjaxParam(ParentId)
74     },
75     function(data) {
76         var json = new Function("return " + data)();
77         var option = "<option value="0">请选择</option>";
78         for (var i = 0; i < json.length; i++) {
79             var AreaID = json[i].AreaID;
80             var AreaName = json[i].AreaName;
81             option += "<option value="" + AreaID + "">" + AreaName + "</option>"
82         }
83         $("#Select3").html(option);
84         $("#Select3").val(areaid);
85     });
86 }
87 $(function() {
88     GetProvinceList();
89     $("#Select1").change(function() {
90         GetCityList();
91     });
92     $("#Select2").change(function() {
93         GetAreaList();
94     });
95 });

 1         protected void GetAreaByParentId(string ParentId)
 2         {
 3             int _ParentId = int.Parse(ParentId);
 4             EBookServer_Home.SystemBase.Sys_Area bllArea = new EBookServer_Home.SystemBase.Sys_Area();
 5             List<EBookServer_Model.SystemBase.Sys_AreaInfo> modellist = bllArea.GetListByFatherID(_ParentId);
 6             var list = modellist.Select(a => new
 7             {
 8                 a.AreaID,
 9                 a.AreaName,
10                 a.Spell,
11                 a.SpellAbb,
12                 isChilderNum = bllArea.IsParentId(a.AreaID)
13             }).OrderByDescending(a => a.isChilderNum);
14             string json = Newtonsoft.Json.JsonConvert.SerializeObject(list);
15             HttpContext.Current.Response.Write(json);
16         }