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 一道字符串分解的题目
Aug 03 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
微信小程序实现时间进度条功能
Nov 17 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
实用函数5
2007/11/08 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python字节单位转换实例
2019/12/05 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
大学校庆策划书
2014/01/31 职场文书
cf搞笑广告词
2014/03/14 职场文书
志愿者活动总结范文
2014/04/26 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python