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 EasyPager 分页函数
May 25 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
自己写了一个展开和收起的多更能型的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
无限级别菜单的实现
2006/10/09 PHP
php实现加减法验证码代码
2014/02/14 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python math模块的基本使用教程
2021/01/16 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
中职生自荐信
2013/10/13 职场文书
企业员工集体活动方案
2014/08/17 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
深入理解 Golang 的字符串
2022/05/04 Golang
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python