1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>省市区级联选择</title>
6 <script type="text/javascript" src="/Content/js/jquery-1.7.2.min.js"></script>
7 <script type="text/javascript" src="/Content/js/public.js"></script>
8 <style type="text/css">
9 body, html, ul {
10 margin: 0px;
11 padding: 0px;
12 }
13
14 #AreaList {
15 list-style-type: none;
16 }
17
18 #AreaList li {
19 float: left;
20 line-height: 30px;
21 height: 30px;
22 margin-right: 5px;
23 }
24 </style>
25 </head>
26 <body>
27 <ul id="AreaList">
28 <li>省份:<select name="Provice" id="Provice">
29 <option value="-1">请选择</option>
30 </select></li>
31 <li>城市:<select name="City" id="City">
32 <option value="-1">请选择</option>
33 </select></li>
34 <li>县区:<select name="Town" id="Town">
35 <option value="-1">请选择</option>
36 </select></li>
37 <li><span id="Msg"></span></li>
38 </ul>
39 <script type="text/javascript">
40 var url = "/Pages/Hander/GetAreaTown.ashx";
41 $(document).ready(function () {
42 BindOption("Provice", { "flag": "Areas", "Area_ID": 0 }, function () {
43 var areaCodes = "";
44 if (areaCodes != "") {
45 loadProvice(areaCodes);
46 }
47 });
48
49 $("#Provice").change(function () {
50 BindOption("City", { "flag": "Areas", "Area_ID": $("#Provice").val() });
51 $("#City").trigger("change");
52 });
53
54 $("#City").change(function () {
55 BindOption("Town", { "flag": "Areas", "Area_ID": $("#City").val() });
56 $("#Town").trigger("change");
57 });
58
59 $("#Town").change(function () {
60 var values = { "Provice": { name: $("#Provice option:selected").text(), value: $("#Provice").val() }, "City": { name: $("#City option:selected").text(), value: $("#City").val() }, "Town": { name: $("#Town option:selected").text(), value: $("#Town").val() } };
61 //alert(values.Provice.name + ":" + values.Provice.value + "||" + values.City.name + ":" + values.City.value + "||" + values.Town.name + ":" + values.Town.value);
62 if (parent.areaChanger)
63 parent.areaChanger.call(this, values);
64 });
65
66 });
67
68 /**
69 *==========================
70 ****加载数据***
71 *==========================
72 *@para Ajax请求参数
73 *@id:需要绑定的下拉框ID
74 *@fn:回调函数
75 */
76 function BindOption(id, para, fn) {
77 $("#" + id).empty();
78 $("#" + id).append("<option value=\"-1\">请选择</option>");
79 if (para.Area_ID != "-1") {
80 changLoader(true, "Msg");
81 getAjax(url, para, function (data) {
82 if (data.success) {
83 var list = data.data, opt = "";
84 for (var i = 0; i < list.length; i++) {
85 opt += "<option value=\"" + list[i]['Area_ID'] + "\">" + list[i]['Area_Name'] + "</option>";
86 }
87 $("#" + id).append(opt);
88 }
89 changLoader(false, "Msg");
90 if (fn)
91 fn.call(this);
92 });
93 }
94 }
95
96 /**
97 *==========================
98 ****加载数据***
99 *==========================
100 *@codeStr 城市区域字符串例如:13,1303,130603依次是ProviceID,CityID,TownID
101 *@author:叶明龙
102 *@time:2014/06/09
103 */
104 function loadProvice(codeStr) {
105 var datas = codeStr.split(",");
106 $("#Provice").val(datas[0]);
107 BindOption("City", { "flag": "Areas", "Area_ID": datas[0] }, function () {
108 $("#City").val(datas[1]);
109 });
110 BindOption("Town", { "flag": "Areas", "Area_ID": datas[1] }, function () {
111 $("#Town").val(datas[2]);
112 });
113
114 }
115
116 </script>
117 </body>
118 </html>