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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
浅谈PHP封装CURL
2019/03/06 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python可视化实现代码
2019/01/15 Python
Python3 批量扫描端口的例子
2019/07/25 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
财务管理职业生涯规划范文
2013/12/27 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
家长会主持词开场白
2014/03/18 职场文书
《大海那边》教学反思
2014/04/09 职场文书
群教班子对照检查材料
2014/08/26 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书