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 相关文章推荐
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
VUE安装使用教程详解
Jun 03 Javascript
vue.js实现三级菜单效果
Oct 19 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php获取linux命令结果的实例
2017/03/13 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
js实现继承的方法及优缺点总结
2019/05/08 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
python自动安装pip
2014/04/24 Python
Python算术运算符实例详解
2017/05/31 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python的形参和实参使用方式
2019/12/24 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
护理实习自我鉴定
2013/12/14 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
销售经理岗位职责
2014/03/16 职场文书
餐厅筹备计划书
2014/04/25 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
党支部承诺书
2015/01/20 职场文书
公司员工奖惩制度
2015/08/04 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL