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 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
js图片处理示例代码
May 12 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
JS实现瀑布流布局
Oct 21 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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中基本符号及使用方法
2010/03/23 PHP
php学习之function的用法
2012/07/14 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python SocketServer源码深入解读
2019/09/17 Python
Python实现分数序列求和
2020/02/25 Python
电大自我鉴定范文
2013/10/01 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
学校安全责任书范本
2014/07/23 职场文书
离婚协议书范本样本
2014/08/19 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
基层党建工作简报
2015/07/21 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
MySQL主从切换的超详细步骤
2022/06/28 MySQL