javascript读取xml文件实现二级菜单联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript解析XML</title>
</head>
<body>
<div align="center">
<h1>JavaScript解析XML</h1>
<select id="province">
<option>---请选择---</option>
</select>
<select id="city">
<option>---请选择---</option>
</select>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var XMLDom = null;
try{
//针对IE浏览器创建一个空的DOM对象
XMLDom = new ActiveXObject("Microsoft.XMLDOM");
}catch(error){
//针对火狐及其它浏览器创建一个空的DOM对象
xmlDom = document.implementation.createDocument("","",null);
}
//关闭异步加载，确保在文档完全加载完成之前解析器不会继续脚本的执行式
XMLDom.async="false";
//解析器加载名为city.xml的文件
XMLDom.load("city.xml");
//获取根节点名称cities
var root = XMLDom.documentElement;
//获取根节点的子节点省份节点provinces
var provinces = root.childNodes;
//获取本页面中provice的节点对象
var province = document.getElementById("province");
for(i=0;i<provinces.length;i++){
//获取省份的名称
var name = provinces[i].getAttribute("name");
//创建option节点
var op = document.createElement("option");
//创建文本节点并添加到option节点中
op.appendChild(document.createTextNode(name));
//将option添加到province中
province.appendChild(op);
}
province.onchange = function(){
//获取province的子节点的集合
var optio = province.options;
//alert(province.selectedIndex);获取当前被点击对象的下标，下标从0开始
//获取当前被选中的文本内容
var name = optio[province.selectedIndex].innerHTML;
for(i=0;i<provinces.length;i++){
//获取省份的名称
if(provinces[i].getAttribute("name")==name){
//获取省节点的子节点
var arr = provinces[i].childNodes;
//获取城市节点节点
var city = document.getElementById("city");
//设置城市节点的子节点的初始个数
city.length=1;
//遍历省节点的子节点
for(i=0;i<arr.length;i++){
//创建option节点
var op = document.createElement("option");
//创建文本节点并添加到option节点中
op.appendChild(document.createTextNode(arr[i].firstChild.nodeValue));
//将option添加到city节点中
city.appendChild(op);
}
}
}
}
}
</script>
如有问题，欢迎交流！