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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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 HTML代码串 截取实现代码
2009/06/29 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
document.documentElement的一些使用技巧
2013/04/18 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Vue实现购物车功能
2017/04/27 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python 常用string函数详解
2016/05/30 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
《雷雨》教学反思
2014/02/20 职场文书
晚会主持词开场白
2014/03/17 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
上课不认真检讨书
2014/09/17 职场文书
2015年校长新年寄语
2014/12/08 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript