JQuery Ajax三级联动地区下拉框

  1 JSP部分代码
  2 
  3  
  4 
  5 <script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>
  6 <script>
  7  //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery'
  8  var jQuery=$;
  9 </script>
 10 
 11 
 12  
 13 
 14 <script>
 15 
 16 
 17   //初始化数据
 18   jQuery(document).ready(function(){
 19  
 20    getProvince();
 21 
 22  });
 23  
 24 
 25  
 26   
 27   //取所有省份
 28   function getProvince(){
 29 
 30    //&callback=?"注意这个是为了解决跨域访问的问题   
 31    var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId=0&callback=?";
 32    
 33    jQuery.getJSON(url,null,function call(result){   
 34          setProvince(result); 
 35      });
 36    
 37    //显示或隐藏激活卡
 38    jQuery("#actionCardChk").click(function(){
 39     if(jQuery("#actionCardChk").attr("checked")==true){
 40      jQuery("#actionCardDiv").show();
 41     }else{
 42      jQuery("#actionCardDiv").hide();
 43     }
 44    });
 45    
 46    //显示或隐藏新增常用地址
 47    jQuery("#addressChk").click(function(){
 48     if(jQuery("#addressChk").attr("checked")==true){
 49      jQuery("#addressDiv").show();
 50     }else{
 51      jQuery("#addressDiv").hide();
 52     }
 53    });
 54    
 55    
 56   }
 57   
 58   
 59   
 60   
 61   //设置省份
 62   function setProvince(result){
 63   
 64   var province = document.getElementById("toProvince");
 65   
 66   jQuery.each(result.data, function(i, area){
 67          var value = area.id;
 68     var text = area.name;
 69     var option = new Option(text,value);
 70     province.options.add(option);
 71           
 72     });  
 73   
 74   }
 75   
 76   
 77   //按上级ID取子地区
 78   function getArea(name){
 79    
 80    if( name=='city' ){
 81     clearSel(document.getElementById("toCity")); //清空城市
 82     var province = document.getElementById("toProvince");
 83     if(province.options[province.selectedIndex].value == "") return;
 84     var areaId = province.options[province.selectedIndex].value;
 85     
 86     var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId="+areaId+"&callback=?";
 87     jQuery.getJSON(url,null,function call(result){   
 88           setCity(result); 
 89       });
 90      
 91    }else if( name=='county'){
 92     clearSel(document.getElementById("toCounty")); //清空城区
 93     var city = document.getElementById("toCity");
 94     if(city.options[city.selectedIndex].value == "") return;
 95     var areaId = city.options[city.selectedIndex].value;
 96     
 97     var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId="+areaId+"&callback=?";
 98     jQuery.getJSON(url,null,function call(result){   
 99           setCounty(result); 
100       });
101       
102    }
103   }
104   
105   //当改变省份时设置城市
106   function setCity(result){
107   
108   var city = document.getElementById("toCity");
109   
110   jQuery.each(result.data, function(i, area){
111          var value = area.id;
112     var text = area.name;
113     var option = new Option(text,value);
114     city.options.add(option);
115     });  
116     
117   }
118   
119   
120   //当改变省份时设置城市
121   function setCounty(result){
122  
123   var county = document.getElementById("toCounty");
124   
125   jQuery.each(result.data, function(i, area){
126          var value = area.id;
127     var text = area.name;
128     var option = new Option(text,value);
129     county.options.add(option);
130     });  
131    
132   }
133   
134   // 清空下拉列表
135   function clearSel(oSelect){
136      
137   while(oSelect.childNodes.length>0){
138    oSelect.removeChild(oSelect.childNodes[0]);
139   }
140          
141   }
142 
143  
144 
145 </script>
146 
147  
148 
149   <tr>
150   <td height="28" colspan="3"> 
151    <select name="toProvince" id="toProvince" onChange="getArea('city')" class="STYLE5" onFocus="doOnFocus(this);">
152     <option value="" selected>请选择省份...</option>
153    </select>         
154   </td> 
155          </tr>
156 
157          <tr>
158   <td height="28" colspan="3">               
159    <select name="toCity" id="toCity" class="board" onChange="getArea('county')" onFocus="doOnFocus(this);">
160     <option value="">请选择城市...</option>
161    </select>        
162   </td>
163                 
164          </tr>
165          
166          <tr>
167   <td class="STYLE3">
168    <select name="toCounty" id="toCounty" class="board"  onfocus="doOnFocus(this);">
169     <option value="">请选择城区...</option>
170    </select>        
171   </td>
172  </tr>
173 
174  
175 
176  
177 
178 JAVA部分代码 Servlet
179 
180  
181 
182  response.setContentType("text/xml;charset=utf-8");
183   response.setHeader("Pragma","No-cache");
184   response.setDateHeader("Expires",0);
185   response.setHeader("Cache-Control","no-cache");    
186   PrintWriter out=response.getWriter();
187 
188   String areaId = request.getParameter("areaId");
189   
190   if(areaId==null || areaId.trim().length()<=0){
191    //sb.append("<data><error>系统错误地区id为空</error></data>");
192    //out.print(sb.toString());
193    return;
194   }  
195   
196 
197   //注意这个是为了解决跨域访问的问题
198   String callback = request.getParameter("callback");   
199   
200   try {
201 
202    List areaList = AreaService.getInstance().getAreasByParentId(Integer.parseInt(areaId));
203 
204    // 取集合
205    JSONArray jsonArray = JSONArray.fromObject(areaList);
206 
207    JSONObject jsobjcet = new JSONObject();
208 
209    jsobjcet.put("data", jsonArray);
210    
211    response.getWriter().write(callback+"("+jsobjcet.toString()+");");
212 
213    log.info(callback+"("+jsobjcet.toString()+");");
214    
215    
216   } catch (IOException e) {
217    e.printStackTrace();
218   }
219      
220 
221  
222 
223 DAO部分代码
224 
225 public List getAreasByParentId(int parentId) {
226   Connection conn=null;
227   Statement stm=null;
228   ResultSet rs=null;
229   List<AreaInfo> list = new ArrayList<AreaInfo>();
230   try{
231    conn = ConnectionPool.getConnection();
232    if( conn == null ) throw new Exception("DataBase connection error");
233    stm = conn.createStatement();
234    String sql ="select * from n_area where parent_id =" + parentId;
235    rs = stm.executeQuery(sql);
236    AreaInfo areaInfo = null;
237    while( rs.next() ) {
238     areaInfo= new AreaInfo();
239     areaInfo.setId(rs.getInt("id"));
240     areaInfo.setName(rs.getString("name"));
241     areaInfo.setParentId(rs.getInt("parent_id"));
242     list.add(areaInfo);
243    }
244   }catch(Exception e){
245    log.error("getAreasByParentId() error:"+e.getMessage());
246   }finally{
247    ConnectionPool.release(conn,stm,rs); //释放资源
248   }
249   return list;
250  }
251 
252  
253 
254  
255 
256 数据表结构
257 
258 CREATE TABLE `n_area` (
259   `id` int(11) NOT NULL auto_increment,
260   `name` varchar(20) default NULL,
261   `parent_id` int(11) NOT NULL default '0',
262   PRIMARY KEY  (`id`)
263 ) ENGINE=MyISAM AUTO_INCREMENT=224 DEFAULT CHARSET=gbk;
264 
265 记录
266 
267  
268 
269 INSERT INTO `n_area` VALUES ('1', '广东省', '0');
270 INSERT INTO `n_area` VALUES ('2', '北京', '0');
271 INSERT INTO `n_area` VALUES ('3', '深圳市', '1');
272 INSERT INTO `n_area` VALUES ('4', '广州市', '1');
273 INSERT INTO `n_area` VALUES ('5', '北京五环以内', '2');
274 INSERT INTO `n_area` VALUES ('6', '天津', '0');
275 INSERT INTO `n_area` VALUES ('7', '天津市', '6');
276 INSERT INTO `n_area` VALUES ('14', '珠海市', '1');
277 INSERT INTO `n_area` VALUES ('15', '汕头市', '1');
278 INSERT INTO `n_area` VALUES ('16', '佛山市', '1');
279 INSERT INTO `n_area` VALUES ('17', '东莞市', '1');
280 INSERT INTO `n_area` VALUES ('22', '肇庆市', '1');
281 INSERT INTO `n_area` VALUES ('23', '惠州市', '1');
282 INSERT INTO `n_area` VALUES ('24', '清远市', '1');
283 INSERT INTO `n_area` VALUES ('25', '韶关市', '1');
284 INSERT INTO `n_area` VALUES ('26', '湛江市', '1');
285 INSERT INTO `n_area` VALUES ('27', '潮州市', '1');
286 INSERT INTO `n_area` VALUES ('28', '梅州市', '1');
287 INSERT INTO `n_area` VALUES ('29', '茂名市', '1');
288 INSERT INTO `n_area` VALUES ('30', '浙江省', '0');
289 INSERT INTO `n_area` VALUES ('31', '江苏省', '0');
290 INSERT INTO `n_area` VALUES ('32', '福建省', '0');
291 INSERT INTO `n_area` VALUES ('33', '广西省', '0');
292 INSERT INTO `n_area` VALUES ('34', '江西省', '0');
293 INSERT INTO `n_area` VALUES ('35', '山东省', '0');
294 INSERT INTO `n_area` VALUES ('36', '湖南省', '0');
295 INSERT INTO `n_area` VALUES ('37', '安徽省', '0');
296 INSERT INTO `n_area` VALUES ('38', '贵州省', '0');
297 INSERT INTO `n_area` VALUES ('39', '黑龙江省', '0');
298 INSERT INTO `n_area` VALUES ('40', '辽宁省', '0');
299 INSERT INTO `n_area` VALUES ('41', '四川省', '0');
300 INSERT INTO `n_area` VALUES ('42', '湖北省', '0');
301 INSERT INTO `n_area` VALUES ('43', '陕西省', '0');
302 INSERT INTO `n_area` VALUES ('44', '河南省', '0');
303 INSERT INTO `n_area` VALUES ('45', '山西省', '0');
304 INSERT INTO `n_area` VALUES ('46', '海南省', '0');
305 INSERT INTO `n_area` VALUES ('47', '杭州市', '30');
306 INSERT INTO `n_area` VALUES ('48', '温州市', '30');
307 INSERT INTO `n_area` VALUES ('49', '宁波市', '30');
308 INSERT INTO `n_area` VALUES ('50', '台州市', '30');
309 INSERT INTO `n_area` VALUES ('51', '南京市', '31');
310 INSERT INTO `n_area` VALUES ('52', '无锡市', '31');
311 INSERT INTO `n_area` VALUES ('53', '苏州市', '31');
312 INSERT INTO `n_area` VALUES ('54', '常州市', '31');
313 INSERT INTO `n_area` VALUES ('55', '徐州市', '31');
314 INSERT INTO `n_area` VALUES ('56', '福州市', '32');
315 INSERT INTO `n_area` VALUES ('57', '厦门市', '32');
316 INSERT INTO `n_area` VALUES ('58', '泉州市', '32');
317 INSERT INTO `n_area` VALUES ('59', '漳州市', '32');
318 INSERT INTO `n_area` VALUES ('60', '南宁市', '33');
319 INSERT INTO `n_area` VALUES ('61', '桂林市', '33');
320 INSERT INTO `n_area` VALUES ('62', '柳州市', '33');
321 INSERT INTO `n_area` VALUES ('63', '百色市', '33');
322 INSERT INTO `n_area` VALUES ('64', '南昌市', '34');
323 INSERT INTO `n_area` VALUES ('65', '赣州市', '34');
324 INSERT INTO `n_area` VALUES ('66', '济南市', '35');
325 INSERT INTO `n_area` VALUES ('67', '青岛市', '35');
326 INSERT INTO `n_area` VALUES ('68', '长沙市', '36');
327 INSERT INTO `n_area` VALUES ('69', '合肥市', '37');
328 INSERT INTO `n_area` VALUES ('70', '贵阳市', '38');
329 INSERT INTO `n_area` VALUES ('71', '哈尔滨市', '39');
330 INSERT INTO `n_area` VALUES ('72', '大连市', '40');
331 INSERT INTO `n_area` VALUES ('73', '成都市', '41');
332 INSERT INTO `n_area` VALUES ('74', '武汉市', '42');
333 INSERT INTO `n_area` VALUES ('75', '西安市', '43');
334 INSERT INTO `n_area` VALUES ('76', '郑州市', '44');
335 INSERT INTO `n_area` VALUES ('77', '太原市', '45');
336 INSERT INTO `n_area` VALUES ('78', '海口市', '46');
337 INSERT INTO `n_area` VALUES ('79', '中山市', '1');
338 INSERT INTO `n_area` VALUES ('80', '顺德市', '1');
339 INSERT INTO `n_area` VALUES ('81', '江门市', '1');
340 INSERT INTO `n_area` VALUES ('82', '云浮市', '1');
341 INSERT INTO `n_area` VALUES ('83', '阳江市', '1');
342 INSERT INTO `n_area` VALUES ('84', '揭阳市', '1');
343 INSERT INTO `n_area` VALUES ('85', '河源市', '1');
344 INSERT INTO `n_area` VALUES ('86', '重庆', '0');
345 INSERT INTO `n_area` VALUES ('87', '重庆市区', '86');
346 INSERT INTO `n_area` VALUES ('88', '上海', '0');
347 INSERT INTO `n_area` VALUES ('89', '上海市', '88');
348 INSERT INTO `n_area` VALUES ('91', '北京五环以外', '2');
349 INSERT INTO `n_area` VALUES ('93', '重庆郊区', '86');
350 INSERT INTO `n_area` VALUES ('94', '河北省', '0');
351 INSERT INTO `n_area` VALUES ('95', '石家庄市', '94');
352 INSERT INTO `n_area` VALUES ('96', '保定市', '94');
353 INSERT INTO `n_area` VALUES ('97', '邯郸市', '94');
354 INSERT INTO `n_area` VALUES ('98', '张家口市', '94');
355 INSERT INTO `n_area` VALUES ('99', '秦皇岛市', '94');
356 INSERT INTO `n_area` VALUES ('100', '邢台市', '94');
357 INSERT INTO `n_area` VALUES ('101', '唐山市', '94');
358 INSERT INTO `n_area` VALUES ('102', '承德市', '94');
359 INSERT INTO `n_area` VALUES ('103', '镇江市', '31');
360 INSERT INTO `n_area` VALUES ('104', '绍兴市', '30');
361 INSERT INTO `n_area` VALUES ('105', '嘉兴市', '30');
362 INSERT INTO `n_area` VALUES ('106', '南通市', '31');
363 INSERT INTO `n_area` VALUES ('107', '扬州市', '31');
364 INSERT INTO `n_area` VALUES ('108', '连云港市', '31');
365 INSERT INTO `n_area` VALUES ('109', '北海市', '33');
366 INSERT INTO `n_area` VALUES ('110', '九江市', '34');
367 INSERT INTO `n_area` VALUES ('111', '景德镇市', '34');
368 INSERT INTO `n_area` VALUES ('112', '淄博市', '35');
369 INSERT INTO `n_area` VALUES ('113', '烟台市', '35');
370 INSERT INTO `n_area` VALUES ('114', '潍坊市', '35');
371 INSERT INTO `n_area` VALUES ('115', '威海市', '35');
372 INSERT INTO `n_area` VALUES ('116', '岳阳市', '36');
373 INSERT INTO `n_area` VALUES ('117', '湘潭市', '36');
374 INSERT INTO `n_area` VALUES ('118', '株洲市', '36');
375 INSERT INTO `n_area` VALUES ('119', '衡阳市', '36');
376 INSERT INTO `n_area` VALUES ('120', '常德市', '36');
377 INSERT INTO `n_area` VALUES ('121', '滁州市', '37');
378 INSERT INTO `n_area` VALUES ('123', '安庆市', '37');
379 INSERT INTO `n_area` VALUES ('124', '遵义市', '38');
380 INSERT INTO `n_area` VALUES ('125', '安顺市', '38');
381 INSERT INTO `n_area` VALUES ('126', '六盘水市', '38');
382 INSERT INTO `n_area` VALUES ('127', '沈阳市', '40');
383 INSERT INTO `n_area` VALUES ('128', '鞍山市', '40');
384 INSERT INTO `n_area` VALUES ('129', '攀枝花市', '41');
385 INSERT INTO `n_area` VALUES ('130', '南充市', '41');
386 INSERT INTO `n_area` VALUES ('131', '襄樊市', '42');
387 INSERT INTO `n_area` VALUES ('132', '黄石市', '42');
388 INSERT INTO `n_area` VALUES ('133', '汉中市', '43');
389 INSERT INTO `n_area` VALUES ('134', '洛阳市', '44');
390 INSERT INTO `n_area` VALUES ('135', '开封市', '44');
391 INSERT INTO `n_area` VALUES ('136', '云南省', '0');
392 INSERT INTO `n_area` VALUES ('137', '昆明市', '136');
393 INSERT INTO `n_area` VALUES ('138', '丽江市', '136');
394 INSERT INTO `n_area` VALUES ('139', '蚌埠市', '37');
395 INSERT INTO `n_area` VALUES ('140', '南山区', '3');
396 INSERT INTO `n_area` VALUES ('141', '其它区', '3');
397 INSERT INTO `n_area` VALUES ('143', '市北区', '67');
398 INSERT INTO `n_area` VALUES ('213', '西藏', '0');
399 INSERT INTO `n_area` VALUES ('178', '甘肃省', '0');
400 INSERT INTO `n_area` VALUES ('179', '兰州市', '178');
401 INSERT INTO `n_area` VALUES ('180', '内蒙古', '0');
402 INSERT INTO `n_area` VALUES ('181', '呼和浩特', '180');
403 INSERT INTO `n_area` VALUES ('182', '吉林省', '0');
404 INSERT INTO `n_area` VALUES ('183', '新疆省', '0');
405 INSERT INTO `n_area` VALUES ('184', '新疆', '183');
406 INSERT INTO `n_area` VALUES ('185', '吉林市', '182');
407 INSERT INTO `n_area` VALUES ('215', '其他地区', '213');
408 INSERT INTO `n_area` VALUES ('187', '其他地区', '1');
409 INSERT INTO `n_area` VALUES ('188', '其他地区', '30');
410 INSERT INTO `n_area` VALUES ('189', '其他地区', '31');
411 INSERT INTO `n_area` VALUES ('190', '其他地区', '32');
412 INSERT INTO `n_area` VALUES ('191', '其他地区', '33');
413 INSERT INTO `n_area` VALUES ('192', '其他地区', '34');
414 INSERT INTO `n_area` VALUES ('193', '其他地区', '35');
415 INSERT INTO `n_area` VALUES ('194', '其他地区', '36');
416 INSERT INTO `n_area` VALUES ('195', '其他地区', '37');
417 INSERT INTO `n_area` VALUES ('196', '其他地区', '38');
418 INSERT INTO `n_area` VALUES ('197', '其他地区', '39');
419 INSERT INTO `n_area` VALUES ('198', '其他地区', '40');
420 INSERT INTO `n_area` VALUES ('199', '其他地区', '41');
421 INSERT INTO `n_area` VALUES ('200', '其他地区', '42');
422 INSERT INTO `n_area` VALUES ('201', '其他地区', '43');
423 INSERT INTO `n_area` VALUES ('202', '其他地区', '44');
424 INSERT INTO `n_area` VALUES ('203', '其他地区', '94');
425 INSERT INTO `n_area` VALUES ('204', '其他地区', '136');
426 INSERT INTO `n_area` VALUES ('205', '其他地区', '178');
427 INSERT INTO `n_area` VALUES ('206', '其他地区', '180');
428 INSERT INTO `n_area` VALUES ('207', '其他地区', '182');
429 INSERT INTO `n_area` VALUES ('214', '拉萨', '213');
430 INSERT INTO `n_area` VALUES ('210', '其他地区', '45');
431 INSERT INTO `n_area` VALUES ('211', '其他地区', '46');
432 INSERT INTO `n_area` VALUES ('212', '其他地区', '86');
433 INSERT INTO `n_area` VALUES ('220', '新三区', '184');
434 INSERT INTO `n_area` VALUES ('219', '新二区', '184');
435 INSERT INTO `n_area` VALUES ('221', '天河区', '4');
436 INSERT INTO `n_area` VALUES ('222', '越秀区', '4');
437 INSERT INTO `n_area` VALUES ('223', '海珠区', '4');
438 
439  
440 
441  
442 
443 附件中有相应的jar包
444 
445 json-lib-2.1-jdk15.jar 是主要的