JQuery打造省市下拉框联动效果


Posted in Javascript onMay 18, 2014

做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容。用JQuery实现比较容易,代码以省市联动效果为例实现。

JSP页面代码如下:

<li id="base"> 
<p>生源地:</p> 
<label> 
<select id="provinceCode" name="provinceCode" onchange="refreshCity()"> 
<option value="">全部</option> 
<c:forEach items="${provinceInfoList}" var="provinceInfo"> 
<option value="${provinceInfo.code}">${provinceInfo.provinceName}</option> 
</c:forEach> 
</select> 
</label> 
</li>

JavaScript代码如下:
function refreshCity(){ 
if($('#provinceCode').find('option:selected').val() == ""){ 
$('#provinceCode').parent().nextAll('lable').remove(); 
return; 
} 
//省份名称 
var provinceName = $('#provinceCode').find('option:selected').text(); 
provinceName = provinceName.substring(0,provinceName.length-4); 
// 发出Json请求,查询子下拉框选项数据 
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", { 
proviceCode : $('#provinceCode').val() 
}, function(data) { 
// 如果有子选项,则创建子下拉框 
if(data != null){ 
// 删除下拉框父级<lable>后的所有同级<lable> 
$('#provinceCode').parent().nextAll('lable').remove(); 
var childId = "city"; 
// 判断是否存在下一级下拉框 不存在就创建 
if($('#'+childId).length == 0){ 
// 创建一个<li>并创建一个<select>添加到id为extra的<ul>中 
$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base')); 
}else{ 
//清空子下拉框内容 
$('#' + childId).empty(); 
} 
// 遍历json串,填充子下拉框 
$.each(data.city, function(i, item) { 
$('#' + childId).append( 
"<option value='"+item.code+"'>" + item.nameAndCode 
+ "</option>"); 
}); 
} 
}); 
}

根据省份获取市的代码如下:
public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{ 
ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode); 
List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+""); 
// 初始化准备输出的Json串 
String cityJson = ""; 
// 遍历集合,构造json串 
if (cityList.size() > 0) { 
cityJson = "{\"city\":["; 
// 拼接查询到的子项 
for (int i = 0; i < cityList.size(); i++) { 
CityInfo city = cityList.get(i); 
String temp = "{\"code\":\"" + city.getCode() 
+ "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")" 
+ "\"}"; 
// 如果是集合中最后一项,则拼接结束符,否则用","隔开 
if (i == cityList.size() - 1) { 
cityJson = cityJson + temp + "]}"; 
} else { 
cityJson = cityJson + temp + ","; 
} 
} 
} 
// 设置输出的字符集和类型并输出json串 
response.setCharacterEncoding("UTF-8"); 
response.setContentType("json"); 
response.getWriter().print(cityJson); 
}
Javascript 相关文章推荐
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
javascript 中的继承实例详解
May 05 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
Express之托管静态文件的方法
Jun 01 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 #Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 #Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 #Javascript
绑定回车enter事件代码
May 18 #Javascript
javascript的alert box在java中如何显示多行
May 18 #Javascript
JSON+HTML实现国家省市联动选择效果
May 18 #Javascript
让alert不出现弹窗的两种方法
May 18 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
关于crontab的使用详解
2013/06/24 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
vue组件学习教程
2017/09/09 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
改进Django中的表单的简单方法
2015/07/17 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python 12306抢火车票脚本
2018/02/07 Python
Python中property函数用法实例分析
2018/06/04 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
校长岗位职责
2013/11/26 职场文书
最新创业融资计划书
2014/01/19 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
外出学习心得体会范文
2016/01/18 职场文书
初中生物教学反思
2016/02/20 职场文书