Js select provincial/municipal joint menu (read xml json)

Js select provincial/municipal joint menu (read xml json) This select provincial/municipal joint menu Code uses js to read xml data and then generate a drop-down menu, the second step is to read json data and then generate a cascade menu.

Js select provincial/municipal joint menu (read xml json)
This select provincial/municipal joint menu Code uses js to read xml data and then generate a drop-down menu. The second step is to read json data and then generate a cascade menu.

<Script type = "text/Webpage effects" src = "../jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript">
Function loadxml (xmlpath ){
Var xmldoc = null;
If (window. activexobject ){
Xmldoc = new activexobject ("microsoft. xmldom ");
} Else if (document. implementation & document. implementation. createdocument ){
Xmldoc = document. implementation. createdocument ("", "", null );
} Else {
Alert ('your browser cannot handle this script .');
}
Xmldoc. async = false;
Xmldoc. load (xmlpath );
Return xmldoc;
}
$ (Function (){
Var xmldoc = null;
Xmldoc = loadxml ("area. xml ");
Var $ s1 = $ ("# select1 ");
Var $ s2 = $ ("# select2 ");
Var $ s3 = $ ("# select3 ");
// Var v1 = null;
// Var v2 = null;
// Var v3 = null;
// Download by http://www.bKjia. c0m
Var v1 = "Shaanxi Province ";
Var v2 = "Baoji City ";
Var v3 = "Chen Cang district ";
Var root = $ (xmldoc). find ("address") [0];
$ (Root). children ("province"). each (function (){
Appendoptionto ($ s1, $ (this). attr ("name"), $ (this). attr ("name"), v1 );
});
$ S1.change (function (){
$S2.html ("");
Var province_node = $ (root). children ("province") [this. selectedindex];
$ (Province_node). children ("city"). each (function (){
Appendoptionto ($ s2, $ (this). attr ("name"), $ (this). attr ("name"), v2 );
});
$ S2.change ();
}). Change ();
$ S2.change (function (){
Ipvs3.html ("");
Var province_node = $ (root). children ("province") [$ s1 [0]. selectedindex];
Var city_node = $ (province_node). children ("city") [this. selectedindex];
$ (City_node). children ("country"). each (function (){
Appendoptionto ($ s3, $ (this). attr ("name"), $ (this). attr ("name"), v3)
});
}). Change ();
Function appendoptionto ($ o, k, v, d ){
Var $ opt = $ ("<option>"). text (k). val (v );
If (v = d) {$ opt. attr ("selected", "selected ")}
$ Opt. appendto ($ o );
}
});
</Script>
<Style type = "text/css tutorial" media = "screen">
Select {width: 80px ;}
</Style>
<Select id = "select1" name = "select1"> </select>
<Select id = "select2" name = "select2"> </select>
<Select id = "select3" name = "select3"> </select>

// Json

<Script type = "text/javascript" src = "../jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript">
Var threeselectdata = {
"Province": {val: "", items: {"city": {val: "", items: {"district/county ":""}}}},
"Beijing": {val: "01", items :{
"Bj-01": {val: "0101", items :{
"Bj-01-01": "010101"
}},
"Bj-02": {val: "0102", items :{
"Bj-02-01": "010201 ",
"Bj-02-02": "010202"
}}
}},
"Shanxi": {val: "02", items :{}},
"Guangzhou": {val: "02", items :{}}
};
$ (Function (){
Var $ s1 = $ ("# select1 ");
Var $ s2 = $ ("# select2 ");
Var $ s3 = $ ("# select3 ");
// Var v1 = null;
// Var v2 = null;
// Var v3 = null;
Var v1 = "01 ";
Var v2 = "0102 ";
Var v3 = "010202 ";
$. Each (threeselectdata, function (k, v ){
Appendoptionto ($ s1, k, v. val, v1 );
});
$ S1.change (function (){
$S2.html ("");
Ipvs3.html ("");
If (this. selectedindex =-1) return;
Var s1_curr_val = this. options [this. selectedindex]. value;
$. Each (threeselectdata, function (k, v ){
If (s1_curr_val = v. val ){
If (v. items ){
$. Each (v. items, function (k, v ){
Appendoptionto ($ s2, k, v. val, v2 );
});
}
}
});
$ S2.change ();
}). Change ();
$ S2.change (function (){
Ipvs3.html ("");
Var s1_curr_val = $ s1 [0]. options [$ s1 [0]. selectedindex]. value;
If (this. selectedindex =-1) return;
Var s2_curr_val = this. options [this. selectedindex]. value;
$. Each (threeselectdata, function (k, v ){
If (s1_curr_val = v. val ){
If (v. items ){
$. Each (v. items, function (k, v ){
If (s2_curr_val = v. val ){
$. Each (v. items, function (k, v ){
Appendoptionto ($ s3, k, v, v3 );
});
}
});
}
}
});
}). Change ();
Function appendoptionto ($ o, k, v, d ){
Var $ opt = $ ("<option>"). text (k). val (v );
If (v = d) {$ opt. attr ("selected", "selected ")}
$ Opt. appendto ($ o );
}
});
</Script>
<Style type = "text/css" media = "screen">
Select {width: 80px ;}
</Style>
<Select id = "select1" name = "select1"> </select>
<Select id = "select2" name = "select2"> </select>
<Select id = "select3" name = "select3"> </select>

Effect preview address
Http://g.111cn.cn/javascript/js/20100831/jquery
Source code
Http://down.bKjia. c0m/down/code/jquery/2010/0831/20548.html