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 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
jquery操作select大全
Apr 25 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
JQuery animate动画应用示例
May 14 jQuery
使用TS来编写express服务器的方法步骤
Oct 29 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
PHP调用三种数据库的方法(1)
2006/10/09 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
cookie的secure属性详解
2015/04/08 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python标准异常和异常处理详解
2015/02/02 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
教师校本培训方案
2014/02/26 职场文书
质量提升方案
2014/06/16 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
指导老师鉴定意见
2015/06/05 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android