给大家分享一个省市区选择框_js实现
2013-03-05 17:40
645 查看
运行效果:
=================================================
部分代码:
=================================================
当然首先你数据库中要有这个table,不然你没有数据.....^_^
js代码:
后台方法:
=================================================
部分代码:
=================================================
当然首先你数据库中要有这个table,不然你没有数据.....^_^
<tr> <td class="tr pr10 "> 所在地: </td> <td class="tl"> <input type="hidden" id="myProvince" value="${user.provinceId}"/> <input type="hidden" id="myCity" value="${user.cityId}"/> <input type="hidden" id="myRegion" value="${user.regionId}"/> <select id="provinceSelect" name="user.provinceId"> <c:forEach items="${xzqhs}" var="xzqh"> <option value="${xzqh.provinceId}" ${user.regionId eq xzqh.provinceId?"selected='selected'":""}>${xzqh.province}</option> </c:forEach> </select> <select id="citySelect" name="user.cityId"> </select> <select id="regionSelect" name="user.regionId"> </select> </td> <td class="gray"></td> </tr>
js代码:
/** * 加载市 * */ function loadCity() { var provinceId = $("#provinceSelect option:selected").val(); if(provinceId == null || provinceId == ""){ //alert("找不到省"); }else{ $.post(rootPath+"/loadCity", { "q" : provinceId }, function(data, result) { if(data == "noId"){ alert("请求错误"); }else if(data == "null"){ alert("系统找不到属于该省的市"); }else{ data = eval("{" + data + "}"); var citySelect = $("#citySelect"); var myCity = $("#myCity").val(); citySelect.html(""); for ( var i = 0; i < data.length; i++) { if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){ citySelect.append("<option selected='selected' value='" + data[i].id + "'>" + data[i].name + "</option>"); }else{ citySelect.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>"); } } loadRegion(); } }); } }; /** * 加载区 * */ function loadRegion() { var cityId = $("#citySelect option:selected").val(); if(cityId == null || cityId == "" || cityId < 1){ alert("找不到市"); }else{ $.post(rootPath+"/loadRegion", { "q" : cityId }, function(data, result) { if(data == "noId"){ alert("请求错误"); }else if(data == "null"){ alert("系统找不到属于该市的区"); }else{ data = eval("{" + data + "}"); var regionSelect = $("#regionSelect"); var myRegion = $("#myRegion").val(); regionSelect.html(""); for ( var i = 0; i < data.length; i++) { if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){ regionSelect.append("<option selected='selected' value='" + data[i].id + "'>" + data[i].name + "</option>"); }else{ regionSelect.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>"); } } } }); } }; /** * 省改变事件 * */ $("#provinceSelect").change(loadCity); /** * 市改变事件 * */ $("#citySelect").change(loadRegion); $(function() { loadCity(); });
后台方法:
/** * 加载城市数据 * */ public void loadCity() { if (q == null || q.trim().equals("")) { write("noId"); } else { List<Xzqh> citys = xzqhService.queryCitys(q.trim()); if (citys == null || citys.size() < 1) { write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh city : citys) { builder.append("{'id':'"); builder.append(city.getCityId()); builder.append("','name':'"); builder.append(city.getCity()); builder.append("'},"); } if (builder.length() > 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } } /** * 加载区数据 * */ public void loadRegion() { if (q == null || q.trim().equals("")) { write("noId"); } else { List<Xzqh> citys = xzqhService.queryDistricts(q.trim()); if (citys == null || citys.size() < 1) { write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh district : citys) { builder.append("{'id':'"); builder.append(district.getRegionId()); builder.append("','name':'"); builder.append(district.getRegion()); builder.append("'},"); } if (builder.length() > 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } }
相关文章推荐
- 本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考,具体如下: 项目中后台一个商品库,新建活动时动态选择所需商品
- js实现一个省市区三级联动选择框代码分享
- js实现一个省市区三级联动选择框代码分享
- 利用js实现一个按钮可选择多个事件
- 发现一个非常好用的前端js自动补全插件,分享给大家(false)
- js实现点击文本框显示日期选择器特效代码分享
- Angular.js实现多个checkbox只能选择一个的方法示例
- 为大家分享一个 Ajax Loading —— spin.js(转)
- 用户进入一个工程的PC端和手机端选择的js实现
- 最近在一个外网的网站,困扰了我多天的循环和大家分享下,也做为我以后工作之用.第一种(信息作用循环.实现方式后台时钟在前台循环滚动(左右)显示).
- 分享一个多线程实现[冒泡][选择][二分法]排序的例子
- 有段时间没有更新博客了,最近比较忙,今天和大家分享一个使用Swift实现的新特性功能吧
- 原生js实现省市区三级联动代码分享
- 分享一个页面访问计数的js代码给大家
- js实现点击文本框显示日期选择器特效代码分享
- 为大家分享一个 Ajax Loading —— spin.js
- 为大家分享一个 Ajax Loading —— spin.js
- 一个自己编写的象棋程序,可实现走棋谱(如炮二平五),工程完成度%96,跟大家分享一下,下一步要做残局,欢迎交流
- vs2015如何安装InstallShield 2015 实现快速注册,今天给大家分享一个暴力快速有效的方法,一秒种实现注册
- 用php和ajax写一个省市区的三级联动,实现地区的下拉选择