这是仿照上篇的js方法修改的
先看下页面代码：
复制代码 代码如下:
事发区域：
页面调用的js：
复制代码 代码如下:
对应的 jquery.building.js 文件如下：
复制代码 代码如下:
/*
ajax 三级联动
日期：2013-2-26
settings 参数说明
-----
buildingurl:大楼下拉数据获取url,josn返回
buildingvalue:默认大楼下拉value
floorurl:楼层数据获取url,josn返回
floorvalue:默认楼层value
nodata:无数据状态
required:必选项
clickcallback:点击时的回调函数
------------------------------ */
(function($){
$.fn.building=function(settings){
if($(this).size()// 默认值
settings=$.extend({
buildingurl:js/city.min.js,
floorurl:js/city.min.js,
buildingvalue:null,
floorvalue:null,
nodata:null,
required:true,
clickcallback:function(){}
},settings);
var box_obj=this;
var building_obj=box_obj.find(.building);
var floor_obj=box_obj.find(.choose_floor);
var floorhidden_obj=box_obj.find(.choose_floor_hidden);
var floorpanel_obj=box_obj.find(#floornum);
var select_prehtml=(settings.required) ? : 请选择;
var prepareselecthtml=function(jsonarray){
var temp_html=select_prehtml;
$.each(jsonarray,function(index,row){
temp_html+=+row.text+;
});
return temp_html;
};
var preparefloorpanelhtml=function(jsonarray){
var temp_html='';
var count=0;
$.each(jsonarray,function(index,row){
if(count==0){
temp_html+='';
}
var otherattr=;
if(row.other){
otherattr=other=+row.other+;
}
temp_html+=''+row.text+' ';
if(count>0&&count%3==0){
temp_html+='
';
count=-1;
}
count=count+1;
});
temp_html+='
';
return temp_html;
};
// 赋值二级下拉框函数
var createfloorpanel=function(){
floor_obj.val('点击选择楼层');
floorhidden_obj.val('');
//floorpanel_obj.empty();
if(building_obj.val()==''){
return;
}
$.getjson(settings.floorurl, { buildingid: building_obj.val(), time: new date().gettime() }, function(jsonresult){
if(!jsonresult.success){
if(settings.nodata==none){
floorpanel_obj.css(display,none);
}else if(settings.nodata==hidden){
floorpanel_obj.css(visibility,hidden);
};
return;
}
// 遍历赋值二级下拉列表
floorpanel_obj.html(preparefloorpanelhtml(jsonresult.data));
floorpanel_obj.find('td').click(function(){
//hide
var text = $(this).html();
var value = $(this).attr(floorid);
var other =$(this).attr(other);
floor_obj.val(text);
floorhidden_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);
}); */
});
};
var init=function(){
// 遍历赋值一级下拉列表
$.getjson(settings.buildingurl, {time: new date().gettime() }, function(jsonresult){
if(!jsonresult.success){
return;
}
// 遍历赋值一级下拉列表
building_obj.html(prepareselecthtml(jsonresult.data));
createfloorpanel();
// 若有传入大楼与楼层的值，则选中。（settimeout为兼容ie6而设置）
settimeout(function(){
if(settings.buildingvalue && settings.buildingvalue.length>0){
building_obj.val(settings.buildingvalue);
createfloorpanel();
settimeout(function(){
if(settings.floorvalue!=null){
floor_obj.val(settings.floorvalue);
};
},1);
};
},1);
});
// 选择一级时发生事件
building_obj.bind(change,function(){
createfloorpanel();
});
floor_obj.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
public map loadbuildings(modelmap model){
string msg = ;
boolean issuccess = false;
list> maps=new arraylist>();
try {
list buildings= geoareaservice.findbuildings();
for (geoarea building : buildings) {
map map=new hashmap();
map.put(value, building.getid().tostring());
map.put(text, building.getname());
maps.add(map);
}
msg = 查找大楼成功。;
issuccess=true;
} catch (exception e) {
msg = 查找大楼失败。;
log.error(查找大楼失败： + e.getmessage(), e);
}
return buildajaxresult(issuccess, msg,maps);
}
@requestmapping(loadfloors)
@responsebody
public map loadfloors(@requestparam(buildingid)integer buildingid,modelmap model){
string msg = ;
boolean issuccess = false;
list> maps=new arraylist>();
try {
list floors= geoareaservice.findfloorbyid(buildingid);
for (geoarea floor : floors) {
map map=new hashmap();
map.put(value, floor.getid().tostring());
map.put(text, floor.getname());
map.put(other, floor.getcode());
maps.add(map);
}
msg = 查找楼层成功。;
issuccess=true;
} catch (exception e) {
msg = 查找楼层失败。;
log.error(查找楼层失败： + e.getmessage(), e);
}
return buildajaxresult(issuccess, msg,maps);
}
protected map buildajaxresult(boolean issuccess, string msg, object data) {
map resultmap = new hashmap();
resultmap.put(success, issuccess);
resultmap.put(msg, msg);
resultmap.put(data, data);
return resultmap;
}
搞定！