js解析xml文件并实现省市的二级连动分析案例

/*

1. 1、加载 XML 的方式       
2.  //IE浏览器      
3.      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");      
4.  //firefox 其他浏览器      
5.     var xmlDoc = document.implementation.createDocument("","",null);  

*/
var provincesNode;
var cityNode;
window.onload = function(){
var xmlDoc = getXmlDocument();
//alert(xmlDoc);
//获取省的所有节点
provincesNode = xmlDoc.getElementsByTagName("province");
 //alert(provincesNode.length);
 //html中select id = pro 对应的节点对象
 var proNode = document.getElementById("pro");
 for(var i=0;i<provincesNode.length;i++){
 //获取具体的省节点
 var provinceNode = provincesNode[i];
 //获取省名称
 var provinceName = provinceNode.getAttribute("name");
 //创建htnl中option元素节点
 var optionNode = document.createElement("option");
 //给option元素节点赋值
 optionNode.setAttribute("value",provinceName);
 //设置文本节点
 optionNode.appendChild(document.createTextNode(provinceName));
          //添加到html中select id = pro对应的节点
 proNode.appendChild(optionNode);
      }
 //获取选中的省名称
 var selectProName = proNode.options[proNode.selectedIndex].value;
 
 
 cityNode  = document.getElementById("city");
 
 for(var j=0;j<provincesNode.length;j++){
 //获取具体的省节点
 var provinceNode = provincesNode[j];
 //获取省名称
 var provinceName = provinceNode.getAttribute("name");
 if(selectProName==provinceName){
 var citiesNode = provinceNode.getElementsByTagName("city");
 
 for(var k=0;k<citiesNode.length;k++){
 var cityName = citiesNode[k].firstChild.nodeValue;
//创建htnl中option元素节点
 var optionNode = document.createElement("option");
 //给option元素节点赋值
 optionNode.setAttribute("value",cityName);
 //设置文本节点
 optionNode.appendChild(document.createTextNode(cityName));
         //添加到html中select id = pro对应的节点
 cityNode.appendChild(optionNode);
 };
 }  
      }
 //注册事件
 proNode.onchange=selectchange; 
};
var selectchange=function(){
//清空操作
var cityNode  = document.getElementById("city");
//cityNode.length=0;
for(var c=0;c<cityNode.length;){
cityNode.remove(0);
}
var cityNode  = document.getElementById("city"); 
 for(var j=0;j<provincesNode.length;j++){
 //获取具体的省节点
 var provinceNode = provincesNode[j];
 //获取省名称
 var provinceName = provinceNode.getAttribute("name");
 if(this.value==provinceName){
 var citiesNode = provinceNode.getElementsByTagName("city");
 
 for(var k=0;k<citiesNode.length;k++){
 var cityName = citiesNode[k].firstChild.nodeValue;
//创建htnl中option元素节点
 var optionNode = document.createElement("option");
 //给option元素节点赋值
 optionNode.setAttribute("value",cityName);
 //设置文本节点
 optionNode.appendChild(document.createTextNode(cityName));
         //添加到html中select id = pro对应的节点
 cityNode.appendChild(optionNode);
 };
 }  
     }
};
/*
 * 获取document对象
 */
function getXmlDocument(){
//声明XMLDoc对象
var xmlDoc;
try{
//如果是ie
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(ex){
try{
//firefox、operal
  xmlDoc = document.implementation.createDocument("", "", null);
}catch(e){
alert("浏览器版本过低");
}
}

xmlDoc.async=false;//异步关闭
//装载xml文件
xmlDoc.load("select1.xml");
return xmlDoc;
}