Domとxmlの二段階連動
6426 ワード
javascript XML
：
<script type="text/javascript">
window.onload = function() {
var xmlDoc = parseXml("images/cities.xml");
// XML
var provinceNodes = xmlDoc.getElementsByTagName("province");
//
var provinceNode = document.getElementById("province");
//
var citiesHtmlNode = document.getElementById("city");
for ( var i = 0; i < provinceNodes.length; i++) {
// option
var optionNode = document.createElement("option");
//
var value = provinceNodes[i].getAttribute("name");
// option name
optionNode.appendChild(document.createTextNode(value));
optionNode.setAttribute("value", value); // option
// provinceNode
provinceNode.appendChild(optionNode);
}
provinceNode.onchange = function() {
//
// select option
var cityHtmlOptionNodes = citiesHtmlNode
.getElementsByTagName("option");// option
//
var len = cityHtmlOptionNodes.length;
for ( var m = 0; m < len; m++) {
// ，【1】 ，
if (cityHtmlOptionNodes[1]) {
//
citiesHtmlNode.remove(cityHtmlOptionNodes[1]);
}
}
for (var i = 0; i < provinceNodes.length; i++) {
// value
if (this.value == provinceNodes[i].getAttribute("name")) {
var citiesNode = provinceNodes[i].getElementsByTagName("city");
for (var j = 0; j < citiesNode.length; j++) {
var cityOptionNode = document.createElement("option");
// alert(citiesNode.length);
// option citieNode[j].firstChild.value
cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));
// city
citiesHtmlNode.appendChild(cityOptionNode);
}
}
}
}
}
// xml
function parseXml(filename) {
var xmlDoc;
try {
//IE
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {
// IE
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (ex) {
alert(" ！");
}
}
// , false， ，
xmlDoc.async = false;
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</head>
<body>
<div align="center">
<div id="data">
<select id="province">
<option>
</option>
</select>
<select id="city">
<option>
</option>
</select>
<select id="country">
<option>
</option>
</select>
</div>
</div>
</body>
</html>
xml ：
<?xml version="1.0" encoding="GBK"?>
<china>
<province name=" ">
<city name=" ">
</city>
<city name=" ">
</city>
<city name=" ">
</city>
<city name=" ">
</city>
<city name=" ">
</city>
<city name=" ">
</city>
</province>
<province name=" ">
<city> </city>
<city> </city>
<city> </city>
<city> </city>
<city> </city>
</province>
<province name=" ">
<city> </city>
<city> </city>
<city> </city>
<city> </city>
<city> </city>
<city> </city>
</province>
<province name=" ">
<city> </city>
<city> </city>
<city> </city>
</province>
</china>