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 相关文章推荐
JS的replace方法介绍
Oct 20 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
实现点击列表弹出列表索引的两种方式
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&amp;&amp;mysql)六
2006/10/09 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
理解javascript模块化
2016/03/28 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
python端口扫描系统实现方法
2014/11/19 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
小学音乐教师个人工作总结
2015/02/05 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书