JS Select Provincial and Municipal cascading menu (read XML JSON)

<script type= "text/page special 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 $s 1=$ ("#select1");
var $s 2=$ ("#select2");
var $s 3=$ ("#select3");
var v1=null;
var v2=null;
var v3=null;
Download by http://www.111cn.net
var v1= "Shaanxi province";
var v2= "Baoji";
var v3= "Chen Cang qu";
var root=$ (xmldoc). Find ("address") [0];
$ (root). Children ("province"). each (function () {
Appendoptionto ($s 1,$ (this). attr (' name '), $ (this). attr ("name"), v1);
});
$s 1.change (function () {
$s 2.html ("");
var province_node=$ (Root). Children ("province") [This.selectedindex];
$ (Province_node). Children ("City"). each (function () {
Appendoptionto ($s 2,$ (this). attr (' name '), $ (this). attr ("name"), V2);
});
$s 2.change ();
). Change ();
$s 2.change (function () {
$s 3.html ("");
var province_node=$ (Root). Children ("province") [$s 1[0].selectedindex];
var city_node=$ (Province_node). Children ("city") [This.selectedindex];
$ (City_node). Children ("country"). each (function () {
Appendoptionto ($s 3,$ (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:{"county": ""}}},
"Beijing": {val: "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: ", items:{}},
' Guangzhou ': {val: ', items:{}}
};
$ (function () {
var $s 1=$ ("#select1");
var $s 2=$ ("#select2");
var $s 3=$ ("#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 ($s 1,k,v.val,v1);
});
$s 1.change (function () {
$s 2.html ("");
$s 3.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 ($s 2,k,v.val,v2);
});
}
}
});
$s 2.change ();
). Change ();
$s 2.change (function () {
$s 3.html ("");
var s1_curr_val = $s 1[0].options[$s 1[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 ($s 3,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.net/javascript/js/20100831/jquery
SOURCE Download Address
Http://down.111cn.net/down/code/jquery/2010/0831/20548.html