省市联动 js
本帖最后由 听老歌 于 2012-01-12 11:42 编辑省市联动 js
在项目开发中我们可能会遇到需要选择省市的下拉框，上次在简明现代魔法中看到一篇感觉不错，所以拿过来记录一下：
city.html:
Html代码1.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.<html>
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5.<title>省市联动</title>
6.<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
7.<script src="js/Area_min.js" type="text/javascript"></script>
8.<script language=JavaScript>
9. var locationList = new $.cnblogs.LocationList();
10. $(function() {
11. locationList.bind({
12. pList : 'sel_province',
13. cList : 'sel_city',
14. defaultProvince : '',
15. defaultCity : ''
16. });
17. });
18.</script>
19.</head>
20.<body>
21.
22. <p class="content">
23. 选择省份：<select id="sel_province" name="sel_province"></select>
24. </p>
25. <p class="content">
26. 选择城市： <select id="sel_city" name="sel_city">
27. </select>
28. </p>
29.
30.</body>
31.</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市联动</title>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script src="js/Area_min.js" type="text/javascript"></script>
<script language=JavaScript>
var locationList = new $.cnblogs.LocationList();
$(function() {
locationList.bind({
pList : 'sel_province',
cList : 'sel_city',
defaultProvince : '',
defaultCity : ''
});
});
</script>
</head>
<body>
<p class="content">
选择省份：<select id="sel_province" name="sel_province"></select>
</p>
<p class="content">
选择城市： <select id="sel_city" name="sel_city">
</select>
</p>
</body>
</html> Area_min.js:
Js代码1.//创建命名空间
2.$.cnblogs = {};
3.
4.//总基类
5.$.cnblogs.Extensible = function(options) {
6. options = options || {};
7. this.initialize(options);
8.};
9.
10.//基类方法
11.$.extend($.cnblogs.Extensible, {
12. //initialize方法用来代替构造函数
13. initialize: function(options) {
14. $.extend(this, options);
15. }
16.});
17.
18.//extend方法
19.//说明:
20.//生成当前类的子类
21.//参数:
22.//overrides: 用来重写基类的内容
23.//附加:
24.//生成的子类同样有extend方法可再生成子类
25.//生成的子类有baseClass成员表示其父类
26.//子类的initialize方法最好先调用父类的initialize方法，调用方法如下
27.//子类名.baseClass.initialize.call(this, options);
28.//示例:
29.//var MyClass = Extensible.extend({
30.// initialize: function(options) {
31.// MyClass.baseClass.initialize.call(this, options);
32.// alert(options.msg);
33.// }
34.//});
35.$.cnblogs.Extensible.extend = function(overrides) {
36. var superClass = this;
37.
38. var subClass = function(options) {
39. options = options || {};
40. $.extend(this, subClass);
41. this.initialize(options);
42. };
43.
44. $.extend(subClass, superClass);
45. $.extend(subClass, overrides);
46.
47. var p = function() { };
48. p.prototype = superClass.prototype;
49. subClass.prototype = new p();
50.
51. subClass.prototype.constructor = subClass;
52.
53. subClass.baseClass = superClass;
54.
55. return subClass;
56.};
57.
58.//Control类
59.$.cnblogs.Control = $.cnblogs.Extensible.extend({
60. //getContentObj方法
61. //说明:
62. //生成并返回此控件html内容的jQuery对象
63. //返回:
64. //此控件html内容的jQuery对象
65. getContentObj: function() { },
66.
67. //cacheResult成员
68. //说明:
69. //如果此值为true,则多次show方法的调用只会执行一次getContentObj方法
70. //如果为false则每次show都会调用getContentObj方法
71. //默认为true
72. cacheResult: false,
73.
74. initialize: function(options) {
75. this.container = options.container;
76. $.cnblogs.Control.baseClass.initialize.call(this, options);
77. },
78.
79. //render方法
80. //说明:
81. //将此Control对象的内容显示在container中
82. //参数:
83. //container: 显示此Control对象的容器
84. //返回:
85. //无返回值
86. //示例:
87. //var c = new $.cnblogs.Control();
88. ////c.show('#myDiv'); //可以使用ID直接传
89. //c.show($('#myDiv')); //推荐使用jQuery对象
90. render: function() {
91. var obj;
92. if (!this.cacheResult || !this.contentObj) {
93. obj = this.getContentObj();
94. if (this.cacheResult) {
95. this.contentObj = obj;
96. }
97. }
98. else {
99. obj = this.contentObj;
100. }
101. if (typeof this.container == 'string') {
102. this.container = $('#' + this.container);
103. }
104. $(this.container).html('').append(obj);
105. }
106.});
107.
108.//BindingSource类
109.$.cnblogs.BindingSource = $.cnblogs.Extensible.extend({
110. //clearHtml成员
111. //说明:
112. //为true时在绑定前清除被绑定对象的innerHTMl
113. clearHtml: true,
114.
115. //getDataObj方法
116. //说明:
117. //获取每一个绑定数据经处理后的jQuery对象
118. //参数:
119. //data: 待绑定的单条数据
120. //index: data在所有数据中的索引
121. //返回:
122. //jQuery对象
123. //示例:
124. //getDataObj : function(data, index) {
125. // return '#' + index.toString() + ': ' + data.toString();
126. //}
127. getDataObj: function(data, index) {
128. return data;
129. },
130.
131. //bindTo方法
132. //说明:
133. //将内容绑定到指定的html对象
134. //参数:
135. //options: 绑定数据的参数,其中可包括一个或多个待绑定的对象
136. //返回:
137. //无返回值
138. bindTo: function(options) { }
139.});
140.
141.$.cnblogs.AjaxBindingSource = $.cnblogs.BindingSource.extend({
142. initialize: function(options) {
143. $.cnblogs.AjaxBindingSource.baseClass.initialize.call(this, options); //调用基类
144.
145. this.url = options.url;
146. this.method = options.method || 'post';
147. this.contentType = options.contentType || 'application/json; charset=utf-8';
148. this.data = options.data || {};
149. this.isAsmx = (options.isAsmx == null) ? true : options.isAsmx;
150. this.wrapper = options.wrapper;
151. this.callback = options.callback || { scope: this, handler: function(data) { } };
152.
153. this.isPending = false;
154. },
155.
156. prepareData: function(options) {
157. var data = this.data;
158. if (data) {
159. if (this.isAsmx) {
160. //如果是调用ASP.NET Web Service,需要将data格式化为json串
161. data = JSON.stringify(data);
162. }
163. return data;
164. }
165. else {
166. return null;
167. }
168. },
169.
170. bindTo: function(options) {
171. //如果已经有AJAX请求则不再重复请求
172. if (!this.isPending) {
173. var target;
174. target = options.target;
175. if (typeof target == 'string') {
176. target = $('#' + options.target);
177. }
178. var self = this; //保持this引用
179.
180. //根据要求清除target的innerHTML值
181. if (this.clearHtml) {
182. target.html('');
183. }
184.
185. var data = this.prepareData(options);
186.
187. this.isPending = true;
188.
189. $.ajax({
190. url: this.url || options.url,
191. type: this.method,
192. data: data,
193. contentType: this.contentType,
194. dataType: 'json',
195. cache: false,
196.
197. success: function(data, status) {
198. self.isPending = false;
199. self.callback.handler.call(self.callback.scope, data);
200. if (self.wrapper) {
201. data = data;
202. }
203. if (data.length) {
204. if (data.length > 1) {
205. for (var i = 0; i < data.length; i++) {
206. var obj = self.getDataObj(data, i);
207. target.append(obj);
208. }
209. }
210. else if (data.length == 1) {
211. var obj = self.getDataObj(data, 0);
212. target.append(obj);
213. }
214. }
215. else {
216. var obj = self.getDataObj(data, 0);
217. target.append(obj);
218. }
219. },
220.
221. error: function(xhr, status, ex) {
222. self.isPending = false;
223. target.append(xhr.responseText);
224. }
225. });
226. }
227. }
228.});
229.
230.$.cnblogs.PagedAjaxBindingSource = $.cnblogs.AjaxBindingSource.extend({
231. prepareData: function(options) {
232. var data = this.data || {};
233. var pageIndex = options.pageIndex || 1;
234. var pageSize = options.pageSize || 20;
235. data['pageIndex'] = pageIndex;
236. data['pageSize'] = pageSize;
237. if (this.isAsmx) {
238. //如果是调用ASP.NET Web Service,需要将data格式化为json串
239. data = JSON.stringify(data);
240. }
241. return data;
242. }
243.});
244.
245.$.cnblogs.SimpleBindingSource = $.cnblogs.BindingSource.extend({
246. initialize: function(options) {
247. $.cnblogs.SimpleBindingSource.baseClass.initialize.call(this, options); //调用基类
248. if (options.data) {
249. this.data = options.data;
250. }
251. else {
252. //初始化绑定数据
253. //在子类中使用this.data.push方法添加数据
254. this.data = new Array();
255. this.initializeData(this.data);
256. }
257. },
258.
259. initializeData: function(data) {
260.
261. },
262.
263. bindTo: function(options) {
264. var target = $('#' + options.target); //获取被绑定对象
265. var self = this; //保持对this对象的引用
266.
267. //根据要求清除target的innerHTML值
268. if (this.clearHtml) {
269. target.html('');
270. }
271.
272. $.each(this.data, function(index) {
273. var obj = self.getDataObj(this, index); //this为循环中的元素值
274. target.append(obj); //将内容追加到被绑定对象的innerHTML
275. });
276. }
277.});
278.
279.$.cnblogs.Dialog = $.cnblogs.Extensible.extend({
280. //getContentObj方法
281. //说明:
282. //生成并返回此控件html内容的jQuery对象
283. //返回:
284. //此控件html内容的jQuery对象
285. getContentObj: function() { },
286.
287. //cacheResult成员
288. //说明:
289. //如果此值为true,则多次show方法的调用只会执行一次getContentObj方法
290. //如果为false则每次show都会调用getContentObj方法
291. //默认为true
292. cacheResult: true,
293.
294. isDialogWrapped: false,
295.
296. show: function() {
297. if (!this.cacheResult || !this.contentObj) {
298. this.contentObj = this.getContentObj();
299. }
300.
301. if (this.isDialogWrapped) {
302. this.contentObj.dialog('open');
303. }
304. else {
305. this.isDialogWrapped = true;
306. this.contentObj.dialog(this.dialogOptions);
307. }
308. },
309.
310. close: function(closing) {
311. if (this.cacheResult) {
312. if (!closing) {
313. this.contentObj.dialog('close');
314. }
315. }
316. else {
317. this.contentObj.dialog('destroy').remove();
318. this.isDialogWrapped = false;
319. this.contentObj = null;
320. }
321. },
322.
323. initialize: function(options) {
324. var self = this; //保持this引用
325.
326. this.dialogOptions = options.dialogOptions || {};
327. if (options.cacheResult != null) {
328. this.cacheResult = options.cacheResult;
329. }
330. $.extend(this.dialogOptions, {
331. bgiframe: true,
332. close: function() {
333. self.close(true);
334. }
335. });
336. }
337.});
338.
339.$.cnblogs.GenericDialog = $.cnblogs.Dialog.extend({
340. initialize: function(options) { 谢谢分享
页:
[1]