Javascript -- 级联菜单, javascript解析xml文件
1.
cities.xml 保存省份和城市
<?xml version="1.0" encoding="GB2312"?> <china> <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> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>潍坊</city> </province> </china>
city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
window.onload=function(){
var provinceElement = document.getElementById("province");
var cityElement = document.getElementById("city");
var xmlDom = parseXML("cities.xml");
var xmlProvinceElements = xmlDom.getElementsByTagName("province");
for(var i=0;i<xmlProvinceElements.length;i++){
var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
var textElement = document.createTextNode(xmlProvinceName);
var optionElement = document.createElement("option");
optionElement.appendChild(textElement);
optionElement.setAttribute("value",xmlProvinceName);
provinceElement.appendChild(optionElement);
}
provinceElement.onchange = function(){
var optionElements = cityElement.getElementsByTagName("option");
for(var i=optionElements.length-1;i>0;i--){
cityElement.removeChild(optionElements[i]);
}
var changename = this.value;
for(var i=0;i<xmlProvinceElements.length;i++){
var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
if(changename==xmlProvinceName){
var xmlCitiesElements = xmlProvinceElements[i].getElementsByTagName("city");
for(var j=0;j<xmlCitiesElements.length;j++){
var xmlCityName = xmlCitiesElements[j].firstChild.nodeValue;
var textElement = document.createTextNode(xmlCityName);
var optionElement = document.createElement("option");
optionElement.appendChild(textElement);
optionElement.setAttribute("value",xmlCityName);
cityElement.appendChild(optionElement);
}
}
}
}
}
///////////////////////////////////////////////////////////////////////////////////////////////
function parseXML(filename){
var xmlDoc;
try { //Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try { //Firefox, Mozilla, Opera, etc.
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
xmlDoc.async=false;
//解析器加载名为 "xxx.xml" 的 XML 文档
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</html>
