JQuery Ajax三级联动地区下拉框

 

JSP部分代码 <script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script> <script> //为了避免 jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; </script> <script> //初始化数据 jQuery(document).ready(function(){ getProvince(); }); //取所有省份 function getProvince(){     //&callback=?"注意这个是为了解决跨域访问 的问题    var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId=0&callback=?"; jQuery.getJSON(url,null,function call(result){   setProvince(result); }); //显示或隐藏激活卡 jQuery("#actionCardChk").click(function(){ if(jQuery("#actionCardChk").attr("checked")==true){ jQuery("#actionCardDiv").show(); }else{ jQuery("#actionCardDiv").hide(); } }); //显示或隐藏新增常用地址 jQuery("#addressChk").click(function(){ if(jQuery("#addressChk").attr("checked")==true){ jQuery("#addressDiv").show(); }else{ jQuery("#addressDiv").hide(); } }); } //设置省份 function setProvince(result){ var province = document.getElementById("toProvince"); jQuery.each(result.data, function(i, area){ var value = area.id; var text = area.name; var option = new Option(text,value); province.options.add(option); }); } //按上级ID取子地区 function getArea(name){ if( name=='city' ){ clearSel(document.getElementById("toCity")); //清空城市 var province = document.getElementById("toProvince"); if(province.options[province.selectedIndex].value == "") return; var areaId = province.options[province.selectedIndex].value; var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId="+areaId+"&callback=?"; jQuery.getJSON(url,null,function call(result){   setCity(result); }); }else if( name=='county'){ clearSel(document.getElementById("toCounty")); //清空城区 var city = document.getElementById("toCity"); if(city.options[city.selectedIndex].value == "") return; var areaId = city.options[city.selectedIndex].value; var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId="+areaId+"&callback=?"; jQuery.getJSON(url,null,function call(result){   setCounty(result); }); } } //当改变省份时设置城市 function setCity(result){ var city = document.getElementById("toCity"); jQuery.each(result.data, function(i, area){ var value = area.id; var text = area.name; var option = new Option(text,value); city.options.add(option); }); } //当改变省份时设置城市 function setCounty(result){ var county = document.getElementById("toCounty"); jQuery.each(result.data, function(i, area){ var value = area.id; var text = area.name; var option = new Option(text,value); county.options.add(option); }); } // 清空下拉列表 function clearSel(oSelect){ while(oSelect.childNodes.length>0){ oSelect.removeChild(oSelect.childNodes[0]); } } </script> <tr> <td height="28" colspan="3"> <select name="toProvince" id="toProvince" onChange="getArea('city')" class="STYLE5" onFocus="doOnFocus(this);"> <option value="" selected>请选择省份...</option> </select>          </td> </tr>          <tr> <td height="28" colspan="3">               <select name="toCity" id="toCity" class="board" onChange="getArea('county')" onFocus="doOnFocus(this);"> <option value="">请选择城市...</option> </select>         </td> </tr> <tr> <td class="STYLE3"> <select name="toCounty" id="toCounty" class="board" οnfοcus="doOnFocus(this);"> <option value="">请选择城区...</option> </select>         </td> </tr> JAVA部分代码 Servlet response.setContentType("text/xml;charset=utf-8"); response.setHeader("Pragma","No-cache"); response.setDateHeader("Expires",0); response.setHeader("Cache-Control","no-cache");     PrintWriter out=response.getWriter();    String areaId = request.getParameter("areaId"); if(areaId==null || areaId.trim().length()<=0){ //sb.append("<data><error> 系统错误地区id为空</error></data>"); //out.print(sb.toString()); return; }   //注意这个是为了解决跨域访问的问题    String callback = request.getParameter("callback");    try {     List areaList = AreaService.getInstance().getAreasByParentId(Integer.parseInt(areaId));     // 取集合 JSONArray jsonArray = JSONArray.fromObject(areaList);     JSONObject jsobjcet = new JSONObject();     jsobjcet.put("data", jsonArray); response.getWriter().write(callback+"("+jsobjcet.toString()+");");     log.info(callback+"("+jsobjcet.toString()+");"); } catch (IOException e) { e.printStackTrace(); } DAO部分代码 public List getAreasByParentId(int parentId) { Connection conn=null; Statement stm=null; ResultSet rs=null; List<AreaInfo> list = new ArrayList<AreaInfo>(); try{ conn = ConnectionPool.getConnection(); if( conn == null ) throw new Exception("DataBase connection error"); stm = conn.createStatement(); String sql ="select * from n_area where parent_id =" + parentId; rs = stm.executeQuery(sql); AreaInfo areaInfo = null; while( rs.next() ) { areaInfo= new AreaInfo(); areaInfo.setId(rs.getInt("id")); areaInfo.setName(rs.getString("name")); areaInfo.setParentId(rs.getInt("parent_id")); list.add(areaInfo); } }catch(Exception e){ log.error("getAreasByParentId() error:"+e.getMessage()); }finally{ ConnectionPool.release(conn,stm,rs); // 释放资源 } return list; } 数据表结构 CREATE TABLE `n_area` ( `id` int(11) NOT NULL auto_increment, `name` varchar(20) default NULL, `parent_id` int(11) NOT NULL default '0', PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=224 DEFAULT CHARSET=gbk; 记录 INSERT INTO `n_area` VALUES ('1', '广东省', '0'); INSERT INTO `n_area` VALUES ('2', '北京', '0'); INSERT INTO `n_area` VALUES ('3', '深圳市', '1'); INSERT INTO `n_area` VALUES ('4', '广州市', '1'); INSERT INTO `n_area` VALUES ('5', '北京五环以内', '2'); INSERT INTO `n_area` VALUES ('6', '天津', '0'); INSERT INTO `n_area` VALUES ('7', '天津市', '6'); INSERT INTO `n_area` VALUES ('14', '珠海市', '1'); INSERT INTO `n_area` VALUES ('15', '汕头市', '1'); INSERT INTO `n_area` VALUES ('16', '佛山市', '1'); INSERT INTO `n_area` VALUES ('17', '东莞市', '1'); INSERT INTO `n_area` VALUES ('22', '肇庆市', '1'); INSERT INTO `n_area` VALUES ('23', '惠州市', '1'); INSERT INTO `n_area` VALUES ('24', '清远市', '1'); INSERT INTO `n_area` VALUES ('25', '韶关市', '1'); INSERT INTO `n_area` VALUES ('26', '湛江市', '1'); INSERT INTO `n_area` VALUES ('27', '潮州市', '1'); INSERT INTO `n_area` VALUES ('28', '梅州市', '1'); INSERT INTO `n_area` VALUES ('29', '茂名市', '1'); INSERT INTO `n_area` VALUES ('30', '浙江省', '0'); INSERT INTO `n_area` VALUES ('31', '江苏省', '0'); INSERT INTO `n_area` VALUES ('32', '福建省', '0'); INSERT INTO `n_area` VALUES ('33', '广西省', '0'); INSERT INTO `n_area` VALUES ('34', '江西省', '0'); INSERT INTO `n_area` VALUES ('35', '山东省', '0'); INSERT INTO `n_area` VALUES ('36', '湖南省', '0'); INSERT INTO `n_area` VALUES ('37', '安徽省', '0'); INSERT INTO `n_area` VALUES ('38', '贵州省', '0'); INSERT INTO `n_area` VALUES ('39', '黑龙江省', '0'); INSERT INTO `n_area` VALUES ('40', '辽宁省', '0'); INSERT INTO `n_area` VALUES ('41', '四川省', '0'); INSERT INTO `n_area` VALUES ('42', '湖北省', '0'); INSERT INTO `n_area` VALUES ('43', '陕西省', '0'); INSERT INTO `n_area` VALUES ('44', '河南省', '0'); INSERT INTO `n_area` VALUES ('45', '山西省', '0'); INSERT INTO `n_area` VALUES ('46', '海南省', '0'); INSERT INTO `n_area` VALUES ('47', '杭州市', '30'); INSERT INTO `n_area` VALUES ('48', '温州市', '30'); INSERT INTO `n_area` VALUES ('49', '宁波市', '30'); INSERT INTO `n_area` VALUES ('50', '台州市', '30'); INSERT INTO `n_area` VALUES ('51', '南京市', '31'); INSERT INTO `n_area` VALUES ('52', '无锡市', '31'); INSERT INTO `n_area` VALUES ('53', '苏州市', '31'); INSERT INTO `n_area` VALUES ('54', '常州市', '31'); INSERT INTO `n_area` VALUES ('55', '徐州市', '31'); INSERT INTO `n_area` VALUES ('56', '福州市', '32'); INSERT INTO `n_area` VALUES ('57', '厦门市', '32'); INSERT INTO `n_area` VALUES ('58', '泉州市', '32'); INSERT INTO `n_area` VALUES ('59', '漳州市', '32'); INSERT INTO `n_area` VALUES ('60', '南宁市', '33'); INSERT INTO `n_area` VALUES ('61', '桂林市', '33'); INSERT INTO `n_area` VALUES ('62', '柳州市', '33'); INSERT INTO `n_area` VALUES ('63', '百色市', '33'); INSERT INTO `n_area` VALUES ('64', '南昌市', '34'); INSERT INTO `n_area` VALUES ('65', '赣州市', '34'); INSERT INTO `n_area` VALUES ('66', '济南市', '35'); INSERT INTO `n_area` VALUES ('67', '青岛市', '35'); INSERT INTO `n_area` VALUES ('68', '长沙市', '36'); INSERT INTO `n_area` VALUES ('69', '合肥市', '37'); INSERT INTO `n_area` VALUES ('70', '贵阳市', '38'); INSERT INTO `n_area` VALUES ('71', '哈尔滨市', '39'); INSERT INTO `n_area` VALUES ('72', '大连市', '40'); INSERT INTO `n_area` VALUES ('73', '成都市', '41'); INSERT INTO `n_area` VALUES ('74', '武汉市', '42'); INSERT INTO `n_area` VALUES ('75', '西安市', '43'); INSERT INTO `n_area` VALUES ('76', '郑州市', '44'); INSERT INTO `n_area` VALUES ('77', '太原市', '45'); INSERT INTO `n_area` VALUES ('78', '海口市', '46'); INSERT INTO `n_area` VALUES ('79', '中山市', '1'); INSERT INTO `n_area` VALUES ('80', '顺德市', '1'); INSERT INTO `n_area` VALUES ('81', '江门市', '1'); INSERT INTO `n_area` VALUES ('82', '云浮市', '1'); INSERT INTO `n_area` VALUES ('83', '阳江市', '1'); INSERT INTO `n_area` VALUES ('84', '揭阳市', '1'); INSERT INTO `n_area` VALUES ('85', '河源市', '1'); INSERT INTO `n_area` VALUES ('86', '重庆', '0'); INSERT INTO `n_area` VALUES ('87', '重庆市区', '86'); INSERT INTO `n_area` VALUES ('88', '上海', '0'); INSERT INTO `n_area` VALUES ('89', '上海市', '88'); INSERT INTO `n_area` VALUES ('91', '北京五环以外', '2'); INSERT INTO `n_area` VALUES ('93', '重庆郊区', '86'); INSERT INTO `n_area` VALUES ('94', '河北省', '0'); INSERT INTO `n_area` VALUES ('95', '石家庄市', '94'); INSERT INTO `n_area` VALUES ('96', '保定市', '94'); INSERT INTO `n_area` VALUES ('97', '邯郸市', '94'); INSERT INTO `n_area` VALUES ('98', '张家口市', '94'); INSERT INTO `n_area` VALUES ('99', '秦皇岛市', '94'); INSERT INTO `n_area` VALUES ('100', '邢台市', '94'); INSERT INTO `n_area` VALUES ('101', '唐山市', '94'); INSERT INTO `n_area` VALUES ('102', '承德市', '94'); INSERT INTO `n_area` VALUES ('103', '镇江市', '31'); INSERT INTO `n_area` VALUES ('104', '绍兴市', '30'); INSERT INTO `n_area` VALUES ('105', '嘉兴市', '30'); INSERT INTO `n_area` VALUES ('106', '南通市', '31'); INSERT INTO `n_area` VALUES ('107', '扬州市', '31'); INSERT INTO `n_area` VALUES ('108', '连云港市', '31'); INSERT INTO `n_area` VALUES ('109', '北海市', '33'); INSERT INTO `n_area` VALUES ('110', '九江市', '34'); INSERT INTO `n_area` VALUES ('111', '景德镇市', '34'); INSERT INTO `n_area` VALUES ('112', '淄博市', '35'); INSERT INTO `n_area` VALUES ('113', '烟台市', '35'); INSERT INTO `n_area` VALUES ('114', '潍坊市', '35'); INSERT INTO `n_area` VALUES ('115', '威海市', '35'); INSERT INTO `n_area` VALUES ('116', '岳阳市', '36'); INSERT INTO `n_area` VALUES ('117', '湘潭市', '36'); INSERT INTO `n_area` VALUES ('118', '株洲市', '36'); INSERT INTO `n_area` VALUES ('119', '衡阳市', '36'); INSERT INTO `n_area` VALUES ('120', '常德市', '36'); INSERT INTO `n_area` VALUES ('121', '滁州市', '37'); INSERT INTO `n_area` VALUES ('123', '安庆市', '37'); INSERT INTO `n_area` VALUES ('124', '遵义市', '38'); INSERT INTO `n_area` VALUES ('125', '安顺市', '38'); INSERT INTO `n_area` VALUES ('126', '六盘水市', '38'); INSERT INTO `n_area` VALUES ('127', '沈阳市', '40'); INSERT INTO `n_area` VALUES ('128', '鞍山市', '40'); INSERT INTO `n_area` VALUES ('129', '攀枝花市', '41'); INSERT INTO `n_area` VALUES ('130', '南充市', '41'); INSERT INTO `n_area` VALUES ('131', '襄樊市', '42'); INSERT INTO `n_area` VALUES ('132', '黄石市', '42'); INSERT INTO `n_area` VALUES ('133', '汉中市', '43'); INSERT INTO `n_area` VALUES ('134', '洛阳市', '44'); INSERT INTO `n_area` VALUES ('135', '开封市', '44'); INSERT INTO `n_area` VALUES ('136', '云南省', '0'); INSERT INTO `n_area` VALUES ('137', '昆明市', '136'); INSERT INTO `n_area` VALUES ('138', '丽江市', '136'); INSERT INTO `n_area` VALUES ('139', '蚌埠市', '37'); INSERT INTO `n_area` VALUES ('140', '南山区', '3'); INSERT INTO `n_area` VALUES ('141', '其它区', '3'); INSERT INTO `n_area` VALUES ('143', '市北区', '67'); INSERT INTO `n_area` VALUES ('213', '西藏', '0'); INSERT INTO `n_area` VALUES ('178', '甘肃省', '0'); INSERT INTO `n_area` VALUES ('179', '兰州市', '178'); INSERT INTO `n_area` VALUES ('180', '内蒙古', '0'); INSERT INTO `n_area` VALUES ('181', '呼和浩特', '180'); INSERT INTO `n_area` VALUES ('182', '吉林省', '0'); INSERT INTO `n_area` VALUES ('183', '新疆省', '0'); INSERT INTO `n_area` VALUES ('184', '新疆', '183'); INSERT INTO `n_area` VALUES ('185', '吉林市', '182'); INSERT INTO `n_area` VALUES ('215', '其他地区', '213'); INSERT INTO `n_area` VALUES ('187', '其他地区', '1'); INSERT INTO `n_area` VALUES ('188', '其他地区', '30'); INSERT INTO `n_area` VALUES ('189', '其他地区', '31'); INSERT INTO `n_area` VALUES ('190', '其他地区', '32'); INSERT INTO `n_area` VALUES ('191', '其他地区', '33'); INSERT INTO `n_area` VALUES ('192', '其他地区', '34'); INSERT INTO `n_area` VALUES ('193', '其他地区', '35'); INSERT INTO `n_area` VALUES ('194', '其他地区', '36'); INSERT INTO `n_area` VALUES ('195', '其他地区', '37'); INSERT INTO `n_area` VALUES ('196', '其他地区', '38'); INSERT INTO `n_area` VALUES ('197', '其他地区', '39'); INSERT INTO `n_area` VALUES ('198', '其他地区', '40'); INSERT INTO `n_area` VALUES ('199', '其他地区', '41'); INSERT INTO `n_area` VALUES ('200', '其他地区', '42'); INSERT INTO `n_area` VALUES ('201', '其他地区', '43'); INSERT INTO `n_area` VALUES ('202', '其他地区', '44'); INSERT INTO `n_area` VALUES ('203', '其他地区', '94'); INSERT INTO `n_area` VALUES ('204', '其他地区', '136'); INSERT INTO `n_area` VALUES ('205', '其他地区', '178'); INSERT INTO `n_area` VALUES ('206', '其他地区', '180'); INSERT INTO `n_area` VALUES ('207', '其他地区', '182'); INSERT INTO `n_area` VALUES ('214', '拉萨', '213'); INSERT INTO `n_area` VALUES ('210', '其他地区', '45'); INSERT INTO `n_area` VALUES ('211', '其他地区', '46'); INSERT INTO `n_area` VALUES ('212', '其他地区', '86'); INSERT INTO `n_area` VALUES ('220', '新三区', '184'); INSERT INTO `n_area` VALUES ('219', '新二区', '184'); INSERT INTO `n_area` VALUES ('221', '天河区', '4'); INSERT INTO `n_area` VALUES ('222', '越秀区', '4'); INSERT INTO `n_area` VALUES ('223', '海珠区', '4');