Three-level linkage list based on jquery area

The projects in hand need to use the regional library, find a few regional libraries on the Internet, feel not very good, so set out to build a regional library. The area is from the China Bureau of Statistics website (the data is official) (Address: http://www.stats.gov.cn/tjbz/xzqhdm/ t20080215_402462675.htm), through text processing, generated to the database (the need for this area database friends can leave the email address, I sent to you), to do the processing operations.

The use of the linkage is to generate a region of JS file, the original is the use of Ajax to achieve linkage, and then feel the generation of JS file is not large, so the use of JS way.

Here is the JS processing code (based on jquery):

<script type= "Text/javascript" >
$ (document). Ready (function () {
Getprovinces ();
});
　　　　
function Getprovinces () {
var pro = "";
for (var i = 0; i < provinces.length; i++) {
Pro + + "<option>" + provinces[i] + "</option>";
}
$ (' #province '). Empty (). append (pro);
GetCities ();
}
function GetCities () {
var ProIndex = $ (' #province '). attr (' SelectedIndex ');
Showcities (ProIndex);
Getcounties ();
}
function Showcities (proIndex) {
var cit = "";
if (cities[proindex] = = null) {
$ (' #city '). empty ();
Return
}
for (var i = 0; i < cities[proindex].length; i++) {
CIT + + "<option>" + cities[proindex][i] + "</option>";
}
$ (' #city '). Empty (). append (CIT);
}
function Getcounties () {
var ProIndex = $ (' #province '). attr (' SelectedIndex ');
var Citindex = $ (' #city '). attr (' SelectedIndex ');
Showcounties (Proindex,citindex);
}
function Showcounties (proindex,citindex) {
var cou = "";
if (counties[proindex][citindex] = = null) {
$ (' #county '). empty ();
Return
}
for (var i = 0; i < counties[proindex][citindex].length;i++) {
Cou + + "<option>" + counties[proindex][citindex] [i] + "</option>";
}
$ (' #county '). Empty (). append (Cou);
}
</script><select id= "province" onchange= "GetCities ()" ></select>
<select id= "City" onchange= "Getcounties ()" style= "width:120px"; ></select>
<select id= "County" style= "width:120px;" ></select>

This has achieved a better regional linkage.

This article supporting source code