jquery怎样实现ajax联动框(一)


Posted in Javascript onMarch 08, 2013

前台页面

<script type="text/javascript" src="${rc.contextPath}/js/jquery.select.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#rwflSelect").linkSelect({ 
nodata:"none", 
required:true, 
firstUrl:'${rc.contextPath}/repair/loadCategory', 
secondUrl:'${rc.contextPath}/repair/loadSubCategory', 
firstValue:'$!{repair.categoryid}',//任务大类 
secondValue:'$!{repair.subcategoryid}'//人物小类 
}); 
}); 
</script> 
<tr id="rwflSelect"> 
<td width="100" class="t_r prten field_c">任务分类:</td> 
<td width="131"><select class="first" name='categoryid'></select> </td> 
<td width="10"></td> 
<td width="131"><select class="second" name="subcategoryid" disabled="disabled"></select></td> 
</tr>


jquery.select.js
/* 
Ajax 三级联动 
日期:2013-2-26 
settings 参数说明 
----- 
firstUrl:一级下拉数据获取URL,josn返回 
firstValue:默认一级下拉value 
secondUrl:二级下拉数据获取URL,josn返回 
secondValue:默认二级下拉value 
thirdUrl:三级下拉数据获取URL,josn返回 
thirdValue:默认三级下拉value 
nodata:无数据状态 
required:必选项 
------------------------------ */ 
(function($){ 
$.fn.linkSelect=function(settings){ 
if($(this).size()<1){return;}; 
// 默认值 
settings=$.extend({ 
firstUrl:"js/city.min.js", 
firstValue:null, 
secondValue:null, 
thirdValue:null, 
nodata:null, 
required:true 
},settings); 
var box_obj=this; 
var first_obj=box_obj.find(".first"); 
var second_obj=box_obj.find(".second"); 
var third_obj=box_obj.find(".third"); 
var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>"; 
var prepareSelectHtml=function(jsonArray){ 
var temp_html=select_prehtml; 
$.each(jsonArray,function(index,row){ 
temp_html+="<option value='"+row.value+"'>"+row.text+"</option>"; 
}); 
return temp_html; 
}; 
// 赋值二级下拉框函数 
var secondStart=function(){ 
second_obj.empty().attr("disabled",true); 
third_obj.empty().attr("disabled",true); 
if(first_obj.val()==''){ 
return; 
} 
$.getJSON(settings.secondUrl, { firstValue: first_obj.val(), time: new Date().getTime() }, function(jsonResult){ 
if(!jsonResult.success){ 
if(settings.nodata=="none"){ 
second_obj.css("display","none"); 
third_obj.css("display","none"); 
}else if(settings.nodata=="hidden"){ 
second_obj.css("visibility","hidden"); 
third_obj.css("visibility","hidden"); 
}; 
return; 
} 
// 遍历赋值二级下拉列表 
second_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""}); 
thirdStart(); 
}); }; 
// 赋值三级下拉框函数 
var thirdStart=function(){ 
third_obj.empty().attr("disabled",true); 
$.getJSON(settings.thirdUrl, { firstValue: first_obj.val(),secondValue:second_obj.val(), time: new Date().getTime() }, function(jsonResult){ 
if(!jsonResult.success){ 
if(settings.nodata=="none"){ 
third_obj.css("display","none"); 
}else if(settings.nodata=="hidden"){ 
third_obj.css("visibility","hidden"); 
}; 
return; 
} 
// 遍历赋值三级下拉列表 
third_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""}); 
thirdStart(); 
}); 
}; 
var init=function(){ 
// 遍历赋值一级下拉列表 
$.getJSON(settings.firstUrl, {time: new Date().getTime() }, function(jsonResult){ 
if(!jsonResult.success){ 
return; 
} 
// 遍历赋值一级下拉列表 
first_obj.html(prepareSelectHtml(jsonResult.data)); 
secondStart(); 
// 若有传入一级与二级的值,则选中。(setTimeout为兼容IE6而设置) 
setTimeout(function(){ 
if(settings.firstValue && settings.firstValue.length>0){ 
first_obj.val(settings.firstValue); 
secondStart(); 
setTimeout(function(){ 
if(settings.secondValue && settings.secondValue.length>0){ 
second_obj.val(settings.secondValue); 
thirdStart(); 
setTimeout(function(){ 
if(settings.thirdValue && settings.thirdValue.length>0){ 
third_obj.val(settings.thirdValue); 
}; 
},1); 
}; 
},1); 
}; 
},1); 
}); 
// 选择一级时发生事件 
first_obj.bind("change",function(){ 
secondStart(); 
}); 
// 选择二级时发生事件 
second_obj.bind("change",function(){ 
thirdStart(); 
}); 
}; 
// 初始化第一个下拉框 
init(); 
}; 
})(jQuery);

${rc.contextPath}/repair/loadCategory 对应的后台方法及返回json值:
@RequestMapping("loadCategory") 
@ResponseBody 
public Map<String, Object> loadCategory(ModelMap model){ 
String msg = ""; 
boolean isSuccess = false; 
List<Map<String, String>> maps=new ArrayList<Map<String,String>>(); 
try { 
List<Category> categories= categoryService.findAllCategory(); 
for (Category category : categories) { 
Map<String,String> map=new HashMap<String, String>(); 
map.put("value", category.getId().toString()); 
map.put("text", category.getCategoryName()); 
maps.add(map); 
} 
msg = "查找大类成功。"; 
isSuccess=true; 
} catch (Exception e) { 
msg = "查找大类失败。"; 
log.error("查找大类失败:" + e.getMessage(), e); 
} 
return buildAjaxResult(isSuccess, msg,maps); 
} 
protected Map<String, Object> buildAjaxResult(boolean isSuccess, String msg, Object data) { 
Map<String, Object> resultMap = new HashMap<String, Object>(); 
resultMap.put("success", isSuccess); 
resultMap.put("msg", msg); 
resultMap.put("data", data); 
return resultMap; 
}

效果如图:
jquery怎样实现ajax联动框(一)
Javascript 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 #Javascript
很好用的js日历算法详细代码
Mar 07 #Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 #Javascript
JS链式调用的实现方法
Mar 07 #Javascript
jQuery滚动加载图片效果的实现
Mar 06 #Javascript
HTML上传控件取消选择
Mar 06 #Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 #Javascript
You might like
php实现aes加密类分享
2014/02/16 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python获取本地计算机名字的方法
2015/04/29 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
JAVA软件工程师测试题
2014/07/25 面试题
编辑找工作求职信范文
2013/12/16 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
征求意见函
2015/06/05 职场文书
签约仪式致辞
2015/07/30 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android