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

联动框的另一种形式，右边的联动框是jquery 生成的。

这是仿照上篇的射流研究…方法修改的先看下页面代码：复制代码代码如下： tr id=' sfqySelect ' TD width=' 100 ' class=' t _ r prten field _ c '事发区域：/TD TD TD宽度=' 131 ' select class=' building '/select/TD TD TD宽度=' 10 '/TD TD TD宽度=' 131 '输入id=' choose _ floor ' class=' text _ k choose _ floor ' type=' text ' value='点击选择楼层输入class=' choose _ floor _ hidden FL { validate : { required d : true } } ' type=' hidden ' name=' geoareid ' value=' div id=' floor num ' class=' floor num '/div/TD/tr页面调用的js:复制代码代码如下：脚本类型=' text/JavaScript ' src=' http : $ { RC。 上下文路径}/js/jquery。建筑。js /脚本脚本类型='text/javascript' $(文档)。ready(function(){ $(' # sfqySelect ')).建筑({ nodata:'none '，required:true，建筑URL : ' $ { RC。上下文路径}/修复/加载建筑物'，楼层URL : ' $ { RC。上下文路径}/修复/加载花'，单击回调：函数(值、文本、其他){ moveGis(其他);} });});/script对应的jquery.building.js文件如下：复制代码代码如下： /* Ajax三级联动日期：2013-2-26设置参数说明- buildingUrl:大楼下拉数据获取网址返回建筑价值：默认大楼下拉值下限：楼层数据获取网址返回建筑面积：默认楼层数值nodata:无数据状态需要：必选项点击回拨：点击时的回调函数- */(函数($){ $ .fn。建筑=函数（设置){ if($(this)).size()1){ return；};//默认值设置=$。extend({ building URL : ' js/city。量滴js '，floorUrl:'js/city.min.js '，buildingValue:null，floorValue:null，nodata:null，required:true，单击Callback:function(){}，设置);var box _ obj=this var building _ obj=box _ obj . find ' .建筑');var floor_obj=box_obj.find ' .选择_ floor’)；var floor hidden _ obj=box _ obj。查找(' .选择_ floor _ hidden’)；var地板面板_ obj=box _ obj。find(' floor num ')；var select _ prehtml=(设置。必需)？":"选项值=""请选择/option '；var prepareSelectHTML=function(JSonarray){ var temp _ html=select _ pre tml；$.每个(jsonArray，函数（索引，行){ temp _ html=' option value='行。值' ' '行。文本'/选项'；});返回temp _ html }；var prepare flood panel html=function(JSonarray){ var temp _ html=' table id=' floor _ table '单元格填充=' 0 '单元格间距=' 0 '；定义变量计数=0;$.每个(jsonArray，函数（索引，行){ if(count==0){ temp _ html=' tr '；} var otherAttr=if(行。其他){其他属性='其他='行。“其他”；} temp _ html=' TD ' oth attr ' LoAd id=' row。值“”行。文本'/TD '；if(count 0 count % 3==0){ temp _ html='/tr '；计数=-1;}计数=计数1;});temp _ html='/table '；返回temp _ html }；//赋值二级下拉框函数var create floor panel=function(){ floor _ obj。“val(”点击选择楼层');地板隐藏_ obj。val(" ")；//地板面板_ obj。empty()；if(building _ obj。val()==' '){ return；} $.GetJSon(settings . BrightURl，{ building id : building _ obj。val()，时间：新日期().getTime() }，函数(jsonResult){ if(！jsonresult。成功){ if(设置。无数据=='无'){地板面板_ obj。CSS('显示'，'无')；} else if(设置。无数据=='隐藏'){地板面板_ obj。CSS('可见性'，'隐藏')；};返回；} //遍历赋值二级下拉列表地板面板_ obj。html(prepare floor panel)html(jsonresult。数据))；floorPanel_obj.find('td ')。单击(函数(){//隐藏var text=$(this)).html()；定义变量值=$(这个).attr(' LoAd id ')；var other=$(this).attr(' other ')；floor_obj.val(文本);floorHidden_obj.val(值);floorPanel_obj.css('display '，' none ')；设置。单击回调(值、文本、其他);});/* $(“正文”).筛选器('。选择_ floor’).单击(功能(){警报(1)地板面板_ obj。CSS('显示'，'无')；});*/});};var init=function(){ //遍历赋值一级下拉列表$.getJSON(settings.buildingUrl，{time: new Date().getTime() }，函数(jsonResult){ if(！jsonresult。成功){返回；} //遍历赋值一级下拉列表建筑_ obj。html(prepareSelectHTMl(jsonresult。数据))；create floor panel()；//若有传入大楼与楼层的值，则选中。

(setTimeout为兼容IE6而设置)setTimeout(函数(){ if(设置。建筑值设置。建筑价值。长度0){ building _ obj。val(设置。建筑价值)；create floor panel()；setTimeout(函数(){ if(settings.floorValue！=null){ floor _ obj。val(设置。地板值)；};},1);};},1);});//选择一级时发生事件building_obj.bind('change '，function(){ create floor panel()；});floor _ obj。点击(function(){//show//alert(floor panel _ obj。html())//地板面板_ obj。CSS('高度'，' 100 px ')；//floorPanel_obj.css('width '，' 100px ')；//钻地面板_obj.css('钻地编号');floorPanel_obj.css('display '，' block ')；});};//初始化第一个下拉框init()；};})(jQuery)；后台处理请求及返回json数据：复制代码代码如下： @请求映射('加载建筑物')@响应体公共映射字符串，对象加载建筑物(模型映射模型){字符串消息=布尔问题访问=假列表映射字符串，字符串映射=新数组映射字符串，字符串();尝试{列出地理区域建筑=地理区域服务。查找建筑物()；for(GeoArea building : buildings){ MapString，String map=new HashMapString，String()；map.put('value '，building.getId().toString())；map.put('text '，building。getname())；maps.add(地图);} msg='查找大楼成功。';issueccess=true} catch(异常e) { msg='查找大楼失败。';log.error('查找大楼失败：' e.getMessage()，e)；}返回buildAjaxResult(issuence、msg、maps} @请求映射('加载花')@响应体公共映射字符串，对象加载花(@请求参数('建筑id ')整数建筑id，模型映射模型){字符串消息=布尔问题访问=假列表映射字符串，字符串映射=新数组映射字符串，字符串();请尝试{ list geo area flowers=geo area service。查找楼层比亚迪(楼栋id)；对于(地理区域楼层：层){ MapString，String map=new HashMapString，String()；map.put('value '，floor.getId().toString())；map.put('text '，floor。getname())；map.put('other '，floor)。getcode())；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)；返回结果地图}搞定！