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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
React简单介绍
May 24 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
初识Laravel
2014/10/30 PHP
php实现删除空目录的方法
2015/03/16 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python-str,list,set间的转换实例
2018/06/27 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
银行领导班子四风对照检查材料
2014/09/27 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2014年销售工作总结
2014/12/01 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
免职通知
2015/04/23 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
导游词之江南周庄
2019/12/06 职场文书