jquery怎样实现ajax联动框(一)
2023-06-13 09:14:47 时间
前台页面
复制代码代码如下:
<scripttype="text/javascript"src="${rc.contextPath}/js/jquery.select.js"></script>
<scripttype="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>
<trid="rwflSelect">
<tdwidth="100"class="t_rprtenfield_c">任务分类:</td>
<tdwidth="131"><selectclass="first"name="categoryid"></select></td>
<tdwidth="10"></td>
<tdwidth="131"><selectclass="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);
varbox_obj=this;
varfirst_obj=box_obj.find(".first");
varsecond_obj=box_obj.find(".second");
varthird_obj=box_obj.find(".third");
varselect_prehtml=(settings.required)?"":"<optionvalue="">请选择</option>";
varprepareSelectHtml=function(jsonArray){
vartemp_html=select_prehtml;
$.each(jsonArray,function(index,row){
temp_html+="<optionvalue=""+row.value+"">"+row.text+"</option>";
});
returntemp_html;
};
//赋值二级下拉框函数
varsecondStart=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:newDate().getTime()},function(jsonResult){
if(!jsonResult.success){
if(settings.nodata=="none"){
second_obj.css("display","none");
third_obj.css("display","none");
}elseif(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();
});
};
//赋值三级下拉框函数
varthirdStart=function(){
third_obj.empty().attr("disabled",true);
$.getJSON(settings.thirdUrl,{firstValue:first_obj.val(),secondValue:second_obj.val(),time:newDate().getTime()},function(jsonResult){
if(!jsonResult.success){
if(settings.nodata=="none"){
third_obj.css("display","none");
}elseif(settings.nodata=="hidden"){
third_obj.css("visibility","hidden");
};
return;
}
//遍历赋值三级下拉列表
third_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""});
thirdStart();
});
};
varinit=function(){
//遍历赋值一级下拉列表
$.getJSON(settings.firstUrl,{time:newDate().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
publicMap<String,Object>loadCategory(ModelMapmodel){
Stringmsg="";
booleanisSuccess=false;
List<Map<String,String>>maps=newArrayList<Map<String,String>>();
try{
List<Category>categories=categoryService.findAllCategory();
for(Categorycategory:categories){
Map<String,String>map=newHashMap<String,String>();
map.put("value",category.getId().toString());
map.put("text",category.getCategoryName());
maps.add(map);
}
msg="查找大类成功。";
isSuccess=true;
}catch(Exceptione){
msg="查找大类失败。";
log.error("查找大类失败:"+e.getMessage(),e);
}
returnbuildAjaxResult(isSuccess,msg,maps);
}
protectedMap<String,Object>buildAjaxResult(booleanisSuccess,Stringmsg,Objectdata){
Map<String,Object>resultMap=newHashMap<String,Object>();
resultMap.put("success",isSuccess);
resultMap.put("msg",msg);
resultMap.put("data",data);
returnresultMap;
}
效果如图:
相关文章
- java实现ajax_Ajax&Java
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- 用ajax写注册页面_jquery的ajax请求写法
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jquery ajax分页写法详解编程语言
- 使用Ajax实现MySQL数据库操作(ajax操作mysql)
- 使用jQuery简化Ajax开发Ajax开发入门
- 用jQuery简化Ajax开发实现方法
- jQuery温习篇强大的JQuery选择器
- 一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- Jquery:ajax实现翻页无刷新功能代码
- jquery用get实现ajax在ie里面刷新不进入后台解决方法
- Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
- jquery的ajax和getJson跨域获取json数据的实现方法
- jquery中get,post和ajax方法的使用小结
- 对Jquery中的ajax再封装,简化操作示例
- jquery跨域请求示例分享(jquery发送ajax请求)
- jquery使用ajax实现微信自动回复插件
- jQuery中的$.ajax()方法应用
- 通过Jquery的Ajax方法读取将table转换为Json
- jquery的ajax异步请求接收返回json数据实例
- PHP+jquery+ajax实现即时聊天功能实例
- 基于Jquery+Ajax+Json实现分页显示附效果图
- jquery实现炫酷的叠加层自动切换特效