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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
javascript实现拖放效果
Dec 16 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python集合的新增元素方法整理
2020/12/07 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
班组长的岗位职责
2013/12/09 职场文书
餐厅总厨求职信
2014/03/04 职场文书
驾驶员培训方案
2014/05/01 职场文书
矛盾论读书笔记
2015/06/29 职场文书
公司员工培训管理制度
2015/08/04 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS