js实现一个省市区三级联动选择框代码分享


Posted in Javascript onMarch 06, 2013

运行效果:
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()); 
} 
} 
}
Javascript 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
js闭包学习心得总结
Apr 17 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 #Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 #Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 #Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 #Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 #Javascript
js日期时间补零的小例子
Mar 05 #Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 #Javascript
You might like
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
express框架下使用session的方法
2019/07/31 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python破解zip加密文件的方法
2018/05/31 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
北大自主招生自荐信
2013/10/19 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
总经理工作职责范文
2014/03/14 职场文书
领导工作表现评语
2015/01/04 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
详解Python flask的前后端交互
2022/03/31 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers