jquery怎样实现ajax联动框(二)

时间：2016.04.19 发布人：sheng8105688

已解决问题

谷歌sheng8105688用户在2016.04.19提交了关于“修真界败类jquery怎样实现ajax联动框(二)”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-27T22:16:25。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，滴水之恩,来日我当涌泉相报！

希望以下的回答，能够帮助你。

第1个回答

用户名：h13463300598 时间：2016.04.20

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

这是仿照上篇的js方法修改的
先看下页面代码：
复制代码代码如下:
<trid="sfqySelect">
<tdwidth="100"class="t_rprtenfield_c">事发区域：</td>
<tdwidth="131">
<selectclass="building"></select>
</td>
<tdwidth="10"></td>
<tdwidth="131">
<inputid="choose_floor"class="text肉十盟制诗简表阶_kchoose_floor"ty问答pe="text"value="点击选择楼层">
<inputclass="choose_floor_hiddenFL{validate:{required:true}}"type="h压盟钱凯个巴虽地idden"name="geoareai重香础d"value="">
<divid="floorNum"class='floorNum'></div>
</td>
</tr>

页面调用的js：
复制代码代码如下:
<scripttype="text/j**ascript"sr地编架讨顺c="${rc.contextPath}/js/jquery.building.js"></script>
<scriptty位送除优最微基毫害pe="text/j**a束script">
$(document).ready(function(){
$("#sfqy云顾进度练武息Select").building({
nodata:"none",
required:true,
buildingUrl:'${rc.contextPath}/repair/loadBuildings',
floorUrl:'${rc.cont展千系光导参extPath}/repair/loadFloors',
clickCallb雨六当车叫张注ack:function(value,text,other){
moveGis(ot足分新室干her);
}
});
});
</script>

对应的jquery.b植作活如白uilding.js文件如才故巴棉季轻庆急太立下：
复制代码代码如下:
/*
Ajax三级联动
日期：2013-2-26
settings参数说明
-----
buildingUrl:大楼下拉**获取URL,jo血sn返回
buildingValue:默认大楼下拉value
floorUrl:楼层**获取URL,josn返回
floorValue:默认楼层value
nodata:无**状态
required:必选项
clickCallback:点击时的回调函数
------------------------------*/
(function($){
$.fn.building=f诉液吃unction(settings){
if($(this).size()<1){实降蒸阻观地村她原return;};
//默认值
哥慢武慢弦东足settings=$.extend({
buildingUrl:"js/city.min.js",
floorUrl:"js/city.min.js",
bu医质是爱些全年ildingValue:**ll,
floorValue:精块根英款说阳希**ll,
nodata:**ll,
required:true,
clickCallback:function(){}
},settings);
varbox_obj=this;
varbuilding_obj=box_obj.find(".building");
varfloor_obj=box_obj.find(".choose_floor");
varfloorh**idden_obj=box_obj.find(".choose_floor_hidden");
varfloorPanel_obj=box_obj.find("#floorNum");
varselect_prehtml=(settings.required)?"":"<optionvalue=''>请选择</option>";
varprepareSelecth**tml=function(jsonArray){
vartemp_html=select_prehtml;
$.each(jsonArray,function(index,row){
temp_html+="<optionvalue='"+row.value+"'>"+row.text+"</option>";
});
returntemp_html;
};
varprepareFloorPanelh**tml=function(jsonArray){
vartemp_html='<tableid="floor_table"cellpadding="0"cellspacing="0">';
varcount=0;
$.each(jsonArray,function(index,row){
if(count==0){
temp_html+='<tr>';
}
varotherAttr="";
if(row.other){
otherAttr="other="+row.other+"";
}
temp_html+='<td'+otherAttr+'floorId='+row.value+'>'+row.text+'</td>';
if(count>0&&count%3==0){
temp_html+='</tr>';
count=-1;
}
count=count+1;
});
temp_html+='</table>';
returntemp_html;
};
//赋筑级下拉框函数
varcreateFloorPanel=function(){
floor_obj.val('点击选择楼层');
floorh**idden_obj.val('');
//floorPanel_obj.empty();
if(building_obj.val()==''){
return;
}
$.getJSON(settings.floorUrl,{buildingId:building_obj.val(),time:newDate().getTime()},function(jsonResult){
if(!jsonResult.success){
if(settings.nodata=="none"){
floorPanel_obj.css("display","none");
}elseif(settings.nodata=="hidden"){
floorPanel_obj.css("visibility","hidden");
};
return;
}
//遍历赋筑级下拉列表
floorPanel_obj.html(prepareFloorPanelh**tml(***.data));
floorPanel_obj.find('td').click(function(){
//hide
vartext=$(this).html();
varvalue=$(this).attr("floorId");
varother=$(this).attr("other");
floor_obj.val(text);
floorh**idden_obj.val(value);
floorPanel_obj.css("display","none");
settings.clickCallback(value,text,other);
});
/*$('body').filter('.choose_floor').click(function(){
alert(1)
floorPanel_obj.css("display","none");
});*/
});

};

varinit=function(){
//遍历赋值一级下拉列表
$.getJSON(settings.buildingUrl,{time:newDate().getTime()},function(jsonResult){
if(!jsonResult.success){
return;
}
//遍历赋值一级下拉列表
building_obj.html(prepareSelecth**tml(***.data));
createFloorPanel();
//若有传入大楼与楼层的值，则选中。（setTimeout为兼容IE6而设置）
setTimeout(function(){
if(settings.buildingValue&&settings.buildingValue.length>0){
building_obj.val(settings.buildingValue);
createFloorPanel();
setTimeout(function(){
if(settings.floorValue!=**ll){
floor_obj.val(settings.floorValue);
};
},1);
};
},1);
});
//选择一级时发生事件
building_obj.bind("change",function(){
createFloorPanel();
});
floor_***.click(function(){
//show
//alert(floorPanel_obj.html())
//floorPanel_obj.css("height","100px");
//floorPanel_obj.css("width","100px");
//floorPanel_obj.css('floorNum');
floorPanel_obj.css("display","block");
});
};
//初始化第一个下拉框
init();
};
})(jQuery);

后台处理请求及返回json**：
复制代码代码如下:
@RequestMapping("loadBuildings")
@ResponseBody
publicMap<String,Object>loadBuildings(ModelMapmodel){
Stringmsg="";
booleanisSuccess=false;
List<Map<String,String>>maps=newArrayList<Map<String,String>>();
try{
List<GeoArea>buildings=geoAreaService.findBuildings();
for(GeoAreabuilding:buildings){
Map<String,String>map=newh**ashMap<String,String>();
map.put("value",building.getId().toString());
map.put("text",building.getName());
maps.add(map);
}
msg="查找大楼成功。";
isSuccess=true;
}catch(Exceptione){
msg="查找大楼失败。";
log.error("查找大楼失败："+e.getMessage(),e);
}
returnbuildAjaxResult(isSuccess,msg,maps);
}
@RequestMapping("loadFloors")
@ResponseBody
publicMap<String,Object>loadFloors(@RequestParam("buildingId")IntegerbuildingId,ModelMapmodel){
Stringmsg="";
booleanisSuccess=false;
List<Map<String,String>>maps=newArrayList<Map<String,String>>();
try{
List<GeoArea>floors=geoAreaService.findFloorById(buildingId);
for(GeoAreafloor:floors){
Map<String,String>map=newh**ashMap<String,String>();
map.put("value",floor.getId().toString());
map.put("text",floor.getName());
map.put("other",floor.getCode());
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=newh**ashMap<String,Object>();
resultMap.put("success",isSuccess);
resultMap.put("msg",msg);
resultMap.put("data",data);
returnresultMap;
}

搞定！