jquery如何实现ajax联动框(一)

前台页面复制代码代码如下：脚本类型=' text/JavaScript ' src=' http : $ { RC。上下文路径}/js/jquery。选择。js /脚本脚本类型='text/javascript' $(文档)。ready(function(){ $(' # rwflSelect ')).linkSelect({ nodata:'none '，required:true，第一个URLs : ' $ { RC。上下文路径}/修复/加载类别'，secondurls : ' $ { RC。上下文路径}/修复/加载子类'，' firstValue:'$！{repair.categoryid} '，//任务大类secondValue:'$！{repair.subcategoryid}'//人物小类});});/script tr id=' rwflSelect ' TD width=' 100 ' class=' t _ r prten field _ c '任务分类：/TD TD TD宽度=' 131 ' select class=' first ' name=' categoryid '/select/TD TD TD宽度=' 10 '/TD TD TD宽度=' 131 ' select class=' second ' name=' subcategoryid ' disabled=' disabled '/select/TD/tr附jquery.select.js复制代码代码如下： /* Ajax三级联动日期：2013-2-26设置参数说明- firstUrl:一级下拉数据获取网址返回第一个值：默认一级下拉值秒Url:二级下拉数据获取网址返回秒值：默认二级下拉值thirdUrl:三级下拉数据获取网址返回第三个值e:默认三级下拉数值nodata:无数据状态需要：必选项- */(函数($){ $ .fn。linkselect=函数（设置){ if($(this)).size()1){ return；};//默认值设置=$。extend({ first URLs : ' js/city。量滴js '，第一个值：null，第二个值：null，第三个值：null，nodata:null，required:true }，设置);var box _ obj=this var first _ obj=box _ obj . find(' .第一个');var second_obj=box_obj.find(' .第二个');var third_obj=box_obj.find ' .第三个');var select _ prehtml=(设置。必需)？":"选项值=""请选择/option '；var prepareSelectHTML=function(JSonarray){ var temp _ html=select _ pre tml；$.每个(jsonArray，函数（索引，行){ temp _ html=' option value='行。值' ' '行。文本'/选项'；});返回temp _ html }；//赋值二级下拉框函数var secondStart=function(){ second _ obj。空的().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() }，函数(jsonResult){ if(！jsonresult。成功){ if(设置。无数据==' none '){ second _ obj。CSS('显示'，'无')；third_obj.css('display '，' none ')；} else if(设置。无数据=='隐藏'){ second _ obj。CSS('可见性'，'隐藏')；third_obj.css('可见性','隐藏');};返回；} //遍历赋值二级下拉列表second _ obj。html(prepareSelectHTMl(jsonresult。数据).attr('disabled '，false).css({'display': ' '，' visibility ' : ' ' })；third stant()；});};//赋值三级下拉框函数var third stant=function(){ third _ obj。空的().attr('disabled '，true)；$.getJSON(settings.thirdUrl，{ firstValue: first_obj.val()，secondValue:second_obj.val()，time: new Date().getTime() }，函数(jsonResult){ if(！jsonresult。成功){ if(设置。无数据==' none '){ third _ obj。CSS('显示'，'无')；} else if(设置。无数据=='隐藏'){ third _ obj。CSS('可见性'，'隐藏')；};返回；} //遍历赋值三级下拉列表third _ obj。html(prepareSelectHTMl(jsonresult。数据).attr('disabled '，false).css({'display': ' '，' visibility ' : ' ' })；third stant()；});};var init=function(){ //遍历赋值一级下拉列表$.getJSON(settings.firstUrl，{time: new Date().getTime() }，函数(jsonResult){ if(！jsonresult。成功){返回；} //遍历赋值一级下拉列表first _ obj。html(prepareSelectHTMl(jsonresult。数据))；secondStart()；//若有传入一级与二级的值，则选中。

(setTimeout为兼容IE6而设置)setTimeout(函数(){ if(设置。第一个值设置。第一个值。长度0){ first _ obj。val(设置。第一值)；secondStart()；setTimeout(函数(){ if(设置。第二个值设置。第二个值。长度0){ second _ obj。val(设置。第二值)；third stant()；setTimeout(函数(){ if(设置。第三个值设置。第三个值。长度0){ third _ obj。val(设置。第三值)；};},1);};},1);};},1);});//选择一级时发生事件first_obj.bind('change '，function(){ secondStart()；});//选择二级时发生事件second_obj.bind('change '，function(){ Thirdstart()；});};//初始化第一个下拉框init()；};})(jQuery)；$ { RC。上下文路径}/修复/加载类别对应的后台方法及返回json值：复制代码代码如下： @请求映射('加载类别')@响应体公共映射字符串，对象加载类别(模型映射模型){字符串消息=布尔问题访问=假列表映射字符串，字符串映射=新数组映射字符串，字符串();请尝试{列出类别类别=categoryservice。findalcategory()；对于(Category Category : categories){ MapString，String map=new HashMapString，String()；map.put('value '，category.getId().toString())；map.put('text '，类别。get category name())；maps.add(地图);} msg='查找大类成功。';issueccess=true} catch(异常e) { msg='查找大类失败。';log.error('查找大类失败：' e.getMessage()，e)；}返回buildAjaxResult(issuence、msg、maps}受保护的MapString，Object buildAjaxResult(布尔值问题，字符串消息，对象数据){ MapString，Object resultMap=new hashmap String，Object()；resultMap.put('success '，issueccessresultMap.put('msg，msg)；resultMap.put('data '，data)；返回结果地图}效果如图