Javascript code sharing _ javascript skills

The address-related link is particularly important when the province, city, and district levels are linked. This directly improves the user's filling speed and accuracy. Next, this article uses js Code to implement one, if you are interested, you can refer to the hope to help you with the running effect:

========================================================== ==========
Some code:
========================================================== ==========
Of course, you must first have this table in your database, otherwise you do not have data... ^_^

The Code is as follows:

Location:





$ {Xzqh. province}

Js Code:

The 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 (""
+ Data [I]. name +"");
} Else {
CitySelect. append (""
+ Data [I]. name +"");
}
}
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 (""
+ Data [I]. name +"");
} Else {
RegionSelect. append (""
+ Data [I]. name +"");
}
}
}
});
}
};
/**
* Provincial change events
*
*/
$ ("# ProvinceSelect"). change (loadCity );
/**
* City change events
*
*/
$ ("# CitySelect"). change (loadRegion );

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

Background method:

The Code is as follows:

/**
* Loading City Data
*
*/
Public void loadCity (){
If (q = null | q. trim (). equals ("")){
Write ("noId ");
} Else {
List 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 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 ());
}
}
}