Js implements a provincial/municipal-level association selection box code sharing

Running effect:

========================================================== ==========
Some code:
========================================================== ==========
Of course, you must first have this table in your database, otherwise you do not have data... ^_^ Copy codeThe Code is as follows: <tr>
<Td class = "tr pr10">
Location:
</Td>
<Td class = "tl">
<Input type = "hidden" id = "myProvince" value = "$ {user. provinceId}"/>
<Input type = "hidden" id = "myCity" value = "$ {user. cityId}"/>
<Input type = "hidden" id = "myRegion" value = "$ {user. regionId}"/>
<Select id = "provinceSelect" name = "user. provinceId">
<C: forEach items = "$ {xzqhs}" var = "xzqh">
<Option value = "$ {xzqh. provinceId}" $ {user. regionId eq xzqh. provinceId? "Selected = 'selected'": "" }>$ {xzqh. province} </option>
</C: forEach>
</Select>
<Select id = "citySelect" name = "user. cityId">
</Select>
<Select id = "regionSelect" name = "user. regionId">
</Select>
</Td>
<Td class = "gray"> </td>
</Tr>

Js Code:Copy codeThe Code is as follows :/**
* Loading City
*
*/
Function loadCity (){
Var provinceId = $ ("# provinceSelect option: selected"). val ();
If (provinceId = null | provinceId = ""){
// Alert ("province not found ");
} Else {
$. Post (rootPath + "/loadCity ",{
"Q": provinceId
}, Function (data, result ){
If (data = "noId "){
Alert ("request error ");
} Else if (data = "null "){
Alert ("the city of the province cannot be found ");
} Else {
Data = eval ("{" + data + "}");
Var citySelect = $ ("# citySelect ");
Var myCity = $ ("# myCity"). val ();
CitySelect.html ("");
For (var I = 0; I <data. length; I ++ ){
If (myCity! = Null & myCity! = "" & MyCity> 0 & myCity = data [I]. id ){
CitySelect. append ("<option selected = 'selected' value = '" + data [I]. id + "'>"
+ Data [I]. name + "</option> ");
} Else {
CitySelect. append ("<option value = '" + data [I]. id + "'>"
+ Data [I]. name + "</option> ");
}
}
LoadRegion ();
}
});
}
};
/**
* Loading area
*
*/
Function loadRegion (){
Var cityId = $ ("# citySelect option: selected"). val ();
If (cityId = null | cityId = "" | cityId <1 ){
Alert ("city not found ");
} Else {
$. Post (rootPath + "/loadRegion ",{
"Q": cityId
}, Function (data, result ){
If (data = "noId "){
Alert ("request error ");
} Else if (data = "null "){
Alert ("the system cannot find the district of the city ");
} Else {
Data = eval ("{" + data + "}");
Var regionSelect =$ ("# regionSelect ");
Var myRegion = $ ("# myRegion"). val ();
RegionSelect.html ("");
For (var I = 0; I <data. length; I ++ ){
If (myRegion! = Null & myRegion! = "" & MyRegion> 0 & myRegion = data [I]. id ){
RegionSelect. append ("<option selected = 'selected' value = '" + data [I]. id + "'>"
+ Data [I]. name + "</option> ");
} Else {
RegionSelect. append ("<option value = '" + data [I]. id + "'>"
+ Data [I]. name + "</option> ");
}
}
}
});
}
};
/**
* Provincial change events
*
*/
$ ("# ProvinceSelect"). change (loadCity );
/**
* City change events
*
*/
$ ("# CitySelect"). change (loadRegion );

$ (Function (){
LoadCity ();
});

Background method:Copy codeThe Code is as follows :/**
* Loading City Data
*
*/
Public void loadCity (){
If (q = null | q. trim (). equals ("")){
Write ("noId ");
} Else {
List <Xzqh> citys = xzqhService. queryCitys (q. trim ());
If (citys = null | citys. size () <1 ){
Write ("null ");
} Else {
StringBuilder builder = new StringBuilder ("[");
For (Xzqh city: citys ){
Builder. append ("{'id ':'");
Builder. append (city. getCityId ());
Builder. append ("', 'name ':'");
Builder. append (city. getCity ());
Builder. append ("'},");
}
If (builder. length ()> 1)
Builder. replace (builder. length ()-1, builder. length (), "]");
Write (builder. toString ());
}
}
}
/**
* Loading area data
*
*/
Public void loadRegion (){
If (q = null | q. trim (). equals ("")){
Write ("noId ");
} Else {
List <Xzqh> citys = xzqhService. queryDistricts (q. trim ());
If (citys = null | citys. size () <1 ){
Write ("null ");
} Else {
StringBuilder builder = new StringBuilder ("[");
For (Xzqh district: citys ){
Builder. append ("{'id ':'");
Builder. append (district. getRegionId ());
Builder. append ("', 'name ':'");
Builder. append (district. getRegion ());
Builder. append ("'},");
}
If (builder. length ()> 1)
Builder. replace (builder. length ()-1, builder. length (), "]");
Write (builder. toString ());
}
}
}