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 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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
php 生成唯一id的几种解决方法
2013/03/08 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
php封装的验证码类分享
2017/02/26 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
python 命名规范知识点汇总
2020/02/14 Python
python 19个值得学习的编程技巧
2020/08/15 Python
python中time、datetime模块的使用
2020/12/14 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
毕业生文员求职信
2013/11/03 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
九年级家长会邀请函
2014/01/15 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
出差报告格式模板
2014/11/06 职场文书
运动会广播稿20字
2015/08/19 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书