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中substring和substr的定义和用法
May 05 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
vue element upload实现图片本地预览
Aug 20 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php 魔术方法使用说明
2009/10/20 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
如何使用python切换hosts文件
2020/04/29 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
方法名是否可以与构造器的名字相同
2012/06/04 面试题
师德师风剖析材料
2014/09/30 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
中班上学期个人总结
2015/02/12 职场文书
雨中的树观后感
2015/06/03 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
python实现简单石头剪刀布游戏
2021/10/24 Python
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python