How does jquery implement the ajax interaction box (2)

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

This is based on the js method modified in the previous article.
Let's take a look at the code on the page: Copy codeThe Code is as follows: <tr id = "sfqySelect">
<Td width = "100" class = "t_r prten field_c"> event region: </td>
& Lt; td width = "131" & gt;
<Select class = "building"> </select>
</Td>
<Td width = "10"> </td>
& Lt; td width = "131" & gt;
<Input id = "choose_floor" class = "text_k choose_floor" type = "text" value = "click to select a floor">
<Input class = "choose_floor_hidden FL {validate: {required: true}" type = "hidden" name = "geoareaid" value = "">
<Div id = "floorNum" class = 'floornum'> </div>
</Td>
</Tr>

Js called on the page:Copy codeThe Code is as follows: <script type = "text/javascript" src = "$ {rc. contextPath}/js/jquery. building. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# SfqySelect"). building ({
Nodata: "none ",
Required: true,
BuildingUrl: '$ {rc. contextPath}/repair/loadBuildings ',
FloorUrl: '$ {rc. contextPath}/repair/loadFloors ',
ClickCallback: function (value, text, other ){
MoveGis (other );
}
});
});
</Script>

The corresponding jquery. building. js file is as follows:Copy codeThe Code is as follows :/*
Ajax three-level linkage
Date:
Settings parameter description
-----
BuildingUrl: the URL for retrieving the building drop-down data, which is returned by josn.
BuildingValue: Default building drop-down value
FloorUrl: Floor Data Retrieval URL, Which is returned by josn
FloorValue: Default floor value
Nodata: No data status
Required: required
ClickCallback: the callback function for clicking
------------------------------*/
(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 )? "": "<Option value =''> select </option> ";
Var prepareSelectHtml = function (jsonArray ){
Var temp_html = select_prehtml;
$. Each (jsonArray, function (index, row ){
Temp_html + = "<option value = '" + row. value + "'>" + row. text + "</option> ";
});
Return temp_html;
};
Var prepareFloorPanelHtml = function (jsonArray ){
Var temp_html = '<table id = "floor_table" cellpadding = "0" cellspacing = "0"> ';
Var count = 0;
$. Each (jsonArray, function (index, row ){
If (count = 0 ){
Temp_html + = '<tr> ';
}
Var otherAttr = "";
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> ';
Return temp_html;
};
// Assign a value to the second-level drop-down box function
Var createFloorPanel = function (){
Floor_obj.val ('click to select level ');
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 second-level drop-down list of value assignment
FloorPanel_obj.html (prepareFloorPanelHtml (jsonResult. data ));
FloorPanel_obj.find ('td '). click (function (){
// Hide
Var text = plain (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 value assignment level-1 drop-down list
$. GetJSON (settings. buildingUrl, {time: new Date (). getTime ()}, function (jsonResult ){
If (! JsonResult. success ){
Return;
}
// Traverse the value assignment level-1 drop-down list
Building_obj.html (prepareSelectHtml (jsonResult. data ));
CreateFloorPanel ();
// Select the value of the incoming building and floor. (SetTimeout is set to be compatible 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 );
});
// An event occurs when a level 1 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 );

The backend processes requests and returns json data:Copy codeThe Code is as follows: @ RequestMapping ("loadBuildings ")
@ ResponseBody
Public Map <String, Object> loadBuildings (ModelMap model ){
String msg = "";
Boolean isSuccess = false;
List <Map <String, String> maps = new ArrayList <Map <String, String> ();
Try {
List <GeoArea> buildings = geoAreaService. findBuildings ();
For (GeoArea building: buildings ){
Map <String, String> map = new HashMap <String, String> ();
Map. put ("value", building. getId (). toString ());
Map. put ("text", building. getName ());
Maps. add (map );
}
Msg = "the building is found successfully. ";
IsSuccess = true;
} Catch (Exception e ){
Msg = "An error occurred while searching for the building. ";
Log. error ("failed to find the building:" + e. getMessage (), e );
}
Return buildAjaxResult (isSuccess, msg, maps );
}
@ RequestMapping ("loadFloors ")
@ ResponseBody
Public Map <String, Object> loadFloors (@ RequestParam ("buildingId") Integer buildingId, ModelMap model ){
String msg = "";
Boolean isSuccess = false;
List <Map <String, String> maps = new ArrayList <Map <String, String> ();
Try {
List <GeoArea> floors = geoAreaService. findFloorById (buildingId );
For (GeoArea floor: floors ){
Map <String, String> map = new HashMap <String, String> ();
Map. put ("value", floor. getId (). toString ());
Map. put ("text", floor. getName ());
Map. put ("other", floor. getCode ());
Maps. add (map );
}
Msg = "the floor is queried successfully. ";
IsSuccess = true;
} Catch (Exception e ){
Msg = "failed to find the floor. ";
Log. error ("failed to find floor:" + e. getMessage (), e );
}
Return buildAjaxResult (isSuccess, msg, maps );
}
Protected Map <String, Object> buildAjaxResult (boolean isSuccess, String msg, Object data ){
Map <String, Object> resultMap = new HashMap <String, Object> ();
ResultMap. put ("success", isSuccess );
ResultMap. put ("msg", msg );
ResultMap. put ("data", data );
Return resultMap;
}

Done!