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" οnfοcus="doOnFocus(this);">169 <option value="">请选择城区...</option>170 </select> 171 </td>172 </tr>173 174 175 176 177 178 JAVA部分代码 Servlet179 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 是主要的
转载于:https://www.cnblogs.com/bjameng/archive/2011/12/04/2276228.html
JQuery Ajax三级联动地区下拉框相关推荐
- php三级联动 一个下拉框 两个文本框,php三级联动(html,php两个页面)
无标题文档 省: 请选择 市: 请选择 区: 请选择 $(function(){ //获取省的信息 ajaxFun(0,"sheng"); }) function ajaxFun( ...
- jquery省份城市联动选择下拉框
<script type="text/javascript" src="__PUBLIC__/Medidata/js/jquery-1.8.3.min.js&quo ...
- php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
- jquery插件 autoComboBox 自动创建联动的下拉框 如:省市区联动
废话{ 诞生背景: 问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢?? 答: 是,留下继续阅读. ...
- ajax 下拉框 保留,Ajax生成select级联下拉框和清空多余选项
Ajax生成select级联下拉框和清空多余选项 实现效果 function professionType(){ var obj=document.getElementById("下拉框id ...
- IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题 参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...
- html下拉框只选择年份和月份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下 代码: Document 1949 var date = new Date(); var y = date.g ...
- 动态联动select下拉框实现
我们在做下拉框选择时,常常会遇到一种场景,就是需要两个下拉框,其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化. 比如我有大的分类: 有氧运动 无氧运动 选择有氧运动时,选项有:跑步, ...
- html只选择年份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下 代码: Document 1949 var date = new Date(); var y = date.g ...
- easyui下拉框option_js和jQuery以及easyui实现对下拉框的指定赋值实例分享
本文主要为大家分享一篇js和jQuery以及easyui实现对下拉框的指定赋值方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. js实现: 1. 通过让第i个o ...
最新文章
- WPS 去掉自动打开的文档漫游和在线模板
- 【Windows】创建任务计划
- 团队作业—预则立他山之石
- Eclipse Java EE 开发 Web 应用程序
- Windows MinGW cmake 安装编译Opencv 3.4.3 C++开发环境
- 二元置信椭圆r语言_r语言二元期权barrier option实现案例
- Eclipse+PyDev 安装和配置(转)
- 脸盲分不清公司的程序员,同事教我一招,果然好用
- (转)Android之发送短信的两种方式
- kotlin基本语法--kotlin官网文档学习
- Citrix 桌面云 XenApp_XenDesktop_7.15 部署系列(五)许可证配置
- 杨涛:正解“街区制、密路网”
- UVALive - 5713
- 浅谈选择示波器时的“5倍法则”
- 如何用控制台cmd打开你的c++程序
- c语言解矩阵方程ax=b,用初等变换的方法求解矩阵方程AX=B
- 海豚湾--纪录日本人如何杀戮海豚的
- storm throw 口袋妖怪_~~~~~~SOS!SOS!SSSSSSSOS!!!~~~那位大侠能给贴一个全招式的英文对...
- 计算机通信理论——问题问答
- PCIe PTM(Precision Time Measurement)介绍
热门文章
- 从车流模型走进双曲守恒律
- 虚拟机启动以后卡在Probing EDD (edd off to disable) …. ok [closed]
- MySQL:基础教程-04(个人笔记)
- Java基础--多线程(上)
- 【图像融合】基于对比度增强结合多尺度边缘保持分解红外与可见光图像融合含Matlab源码
- win10 下如何安装PL232 串口驱动
- MongoDB之:Query使用积累(1)
- 论文阅读:PAD-Net: An Efficient Framework for Dynamic Networks
- 2011年第三届蓝桥杯单片机(省赛)_温度监控器
- 关于“番茄花园”的危机