How jquery implements ajax linkage box (2)_jquery

Another form of linkage box, the linkage box on the right is generated with jquery

This is modified by imitating the js method in the previous article
First look at the page code:

Copy code The code is as follows:

Incident area:

JS called by the page:

Copy code The code is as follows:

< ;script type="text/javascript" src="${rc.contextPath}/js/jquery.building.js">

The corresponding jquery.building.js file is as follows:

Copy code The code is as follows:

/*
Ajax three-level linkage
Date: 2013-2-26
settings parameter description
-----
buildingUrl: building drop-down data acquisition URL, josn returns
buildingValue: default building drop-down value
floorUrl: floor data acquisition URL, josn returns
floorValue: default floor value
nodata: no data status
required: required option
clickCallback :Callback function when clicked
----------------------------- */
(function($){
$.fn.building=function(settings){
if($(this).size()<1){return;};
// Default value
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) ? "" : "Please select";
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 ='';
if(count>0&&count%3==0){
temp_html ='';
count=-1;
}
count=count 1;
});
temp_html ='

' row.text '

';
return temp_html;
};
// Assign the secondary drop-down box function
var createFloorPanel=function(){
floor_obj.val('Click to select the floor');
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;
}
// Traverse the assigned secondary drop-down list
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(){
// Traverse the assignment one-level drop-down list
$.getJSON(settings.buildingUrl, {time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
return;
}
// Traverse the assignment one-level drop-down list
building_obj.html(prepareSelectHtml(jsonResult.data));
createFloorPanel() ;
// If the values ​​of building and floor are passed in, select it. (setTimeout is set for compatibility with 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);
});
// Event occurs when level one is selected
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");
});
};
//Initialize the first drop-down box
init();
};
})(jQuery);

Background processing request and return json data:

Copy code The code is as follows:

@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;
}

搞定！