Html and js
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = gbk/>
<Title> selectList </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
. SelectList {width: 200px; margin: 50px auto ;}
</Style>
<Script type = "text/javascript" src = "jquery1.7.1.js"> </script>
</Head>
<Body>
<Div class = "selectList">
<Select class = "province">
<Option> select </option>
</Select>
<Select class = "city">
<Option> select </option>
</Select>
<Select class = "district">
<Option> select </option>
</Select>
</Div>
<Div class = "selectList">
<Select class = "province">
<Option> select </option>
</Select>
<Select class = "city">
<Option> select </option>
</Select>
<Select class = "district">
<Option> select </option>
</Select>
</Div>
<Script type = "text/javascript">
$ (Function (){
$ (". SelectList"). each (function (){
Var url = "area. json ";
Var areaJson;
Var temp_html;
Var oProvince = $ (this). find (". province ");
Var oCity = $ (this). find (". city ");
Var oDistrict = $ (this). find (". district ");
// Initialize the province
Var province = function (){
$. Each (areaJson, function (I, province ){
Temp_html + = "<option value = '" + province. p + "'>" + province. p + "</option> ";
});
OProvince.html (temp_html );
City ();
};
// Assign a City Value
Var city = function (){
Temp_html = "";
Var n = oProvince. get (0). selectedIndex;
$. Each (areaJson [n]. c, function (I, city ){
Temp_html + = "<option value = '" + city. ct + "'>" + city. ct + "</option> ";
});
OCity.html (temp_html );
District ();
};
// County
Var district = function (){
Temp_html = "";
Var m = oProvince. get (0). selectedIndex;
Var n = oCity. get (0). selectedIndex;
If (typeof (areaJson [m]. c [n]. d) = "undefined "){
ODistrict.css ("display", "none ");
} Else {
ODistrict.css ("display", "inline ");
$. Each (areaJson [m]. c [n]. d, function (I, district ){
Temp_html + = "<option value = '" + district. dt + "'>" + district. dt + "</option> ";
});
ODistrict.html (temp_html );
};
};
// Select province to change City
OProvince. change (function (){
City ();
});
// Select the city change County
OCity. change (function (){
District ();
});
// Obtain json data
$. GetJSON (url, function (data ){
AreaJson = data;
Province ();
});
});
});
</Script>
</Body>
</Html>
Json file (area. json). Here is only an example. Add or write the file as needed.
Copy codeThe Code is as follows:
[
{"P": "Jiangxi Province ",
"C ":[
{"Ct": "Nanchang city ",
"D ":[
{"Dt": "Xihu District "},
{"Dt": "Donghu district "},
{"Dt": "High-Tech Zone "}
]},
{"Ct": "Ganzhou City ",
"D ":[
{"Dt": "Ruijin county "},
{"Dt": "Nanfeng county "},
{"Dt": "quannan county "}
]}
]},
{"P": "Beijing ",
"C ":[
{"Ct": "Dongcheng District "},
{"Ct": "Xicheng district "}
]},
{"P": "Hebei Province ",
"C ":[
{"Ct": "Shijiazhuang ",
"D ":[
{"Dt": "Chang 'an district "},
{"Dt": "qiaodong district "},
{"Dt": "qiaoxi district "}
]},
{"Ct": "Tangshan City ",
"D ":[
{"Dt": "luannan county "},
{"Dt": "leting county "},
{"Dt": "qianxi county "}
]}
]}
]
You are advised to encapsulate them as plug-ins for convenient calling.