Generate cascade drop-down box code using js + xml

To be selected by default, define a variable var cityId = city id
Below is the js Code Copy codeThe Code is as follows: function readxml (){
Var XmlDoc = null;
If (window. ActiveXObject ){
XmlDoc = new ActiveXObject ("Microsoft. XMLDOM ");
XmlDoc. async = false;
XmlDoc. load (path + "/web/common/regions. xml ");
Browse = "ie ";
} Else if (document. implementation
& Document. implementation. createDocument ){
XmlDoc = document. implementation. createDocument ('','', null );
XmlDoc. load ("regions. xml ");
Browse = "ff ";
} Else {
Alert ('not compatible with this browser! ');
}
Var root = XmlDoc.doc umentElement;
// Obtain the province node under the root node
Var provinces = root. childNodes;
Var province = document. getElementByIdx_x_x ("province ");
Var cities = document. getElementByIdx_x_x ("regId ");
For (var I = 0; I <provinces. length; I ++ ){
// Obtain the name attribute value of the province Node
Var name = provinces [I]. getAttribute ("name ");
// Create an option
Var opt = document_createElement_x_x ("option ");
// Add text for option
Opt. a (document_createTextNode (name ));
// Add to parent node
If (cityId! = Null & cityId! = ""){
Var citys = provinces [I]. childNodes;
For (var j = 0; j <citys. length; j ++ ){
If (citys [j]. getAttribute ("id") = cityId ){
Opt. selected = "selected ";
For (var j = 0; j <citys. length; j ++ ){
// Create an option
Var opt1 = document_createElement_x_x ("option ");
Opt1.value = citys [j]. getAttribute ("id ");
// Add text for option
Opt1.a (document_createTextNode (citys [j]
. GetAttribute ("name ")));
// Add to parent node
If (citys [j]. getAttribute ("id") = cityId ){
Opt1.selected = "selected ";
}
Cities. a (opt1 );
}
}
}
}
Province. a (opt );
}
Province. onchange = function (){
Var pce = document. getElementByIdx_x_x ("province ");
Var opts = pce. options;
Var opt1 = opts [pce. selectedIndex];
Var name = opt1.innerText;
For (var I = 0; I <provinces. length; I ++ ){
// Obtain the name attribute value of the province Node
Var name1 = provinces [I]. getAttribute ("name ");
If (name = name1 ){
Cities. length = 1; // clear each change
Var pros = provinces [I];
Var citys = pros. childNodes;
For (var j = 0; j <citys. length; j ++ ){
// Create an option
Var opt1 = document_createElement_x_x ("option ");
Opt1.value = citys [j]. getAttribute ("id ");
// Add text for option
Opt1.a (document_createTextNode (citys [j]
. GetAttribute ("name ")));
// Add to parent node
Cities. a (opt1 );
}
}
}
}
}

Below is the xml structureCopy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Regions>
<Province name = "Hubei">
<City id = "1" name = "Wuhan" isOpen = "1"/>
<City id = "2" name = "Huanggang" isOpen = "1"/>
<City id = "19" name = "Xiangfan" isOpen = "1"/>
<City id = "22" name = "Ezhou" isOpen = "0"/>
<City id = "24" name = "Huangshi" isOpen = "1"/>
</Province>
<Province name = "Chongqing">
<City id = "23" name = "Chongqing" isOpen = "0"/>
</Province>
</Regions>