Home >Web Front-end >JS Tutorial >js xml generates cascading drop-down box code_javascript skills

js xml generates cascading drop-down box code_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:51:34994browse

When you need to select it by default, define a variable var cityId=city id
The following is the js code

Copy the code The 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.documentElement;
// Get the province node below 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 ) {
// Get the value of the name attribute of the province node
var name = provinces[i].getAttribute("name");
// Create an option
var opt = document_createElement_x_x("option");
// Add text to option
opt.a(document_createTextNode(name));
// Add to parent node
if(cityId!= null&&cityId!=""){
var cities=provinces[i].childNodes;
for(var j=0;jif(citys[j].getAttribute ("id")==cityId){
opt.selected="selected";
for ( var j = 0; j < cities.length; j ) {
// Create an option
var opt1 = document_createElement_x_x("option");
opt1.value = cities[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 ) {
// Get the value of the name attribute of the province node
var name1 = provinces[i].getAttribute("name");
if (name == name1) {
cities.length = 1;// Clear every time it changes
var pros = provinces[i] ;
var cities = pros.childNodes;
for ( var j = 0; j < cities.length; j ) {
// Create an option
var opt1 = document_createElement_x_x("option" );
opt1.value = cities[j].getAttribute("id");
// Add text for option
opt1.a(document_createTextNode(citys[j]
.getAttribute(" name")));
// Add to parent node
cities.a(opt1);
}
}
}
}
}

The following is the xml structure
Copy the code The code is as follows:













Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn