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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 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
redis 队列操作的例子(php)
2012/04/12 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python中遍历列表的方法总结
2019/06/27 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
运动会广播稿30字
2014/01/21 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
通信工程求职信
2014/07/16 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
义诊活动通知
2015/04/24 职场文书
党员承诺书范文2015
2015/04/27 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
mysql联合索引的使用规则
2021/06/23 MySQL
Python学习之时间包使用教程详解
2022/03/21 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers