二级联动效果实现(在javascript中解析xml文件添加到html(select)中)

// 当窗体加载完毕，执行
window.οnlοad=function(){

/**
* 第一步：得到xml document对象
*/
var xmlDoc = getXmlDocument();

/**
* 第三步：xml中获取所有省的节点
*/
provincesNode = xmlDoc.getElementsByTagName("province");

/**
* 第六步：html中select id=pro对应节点对象
*/
var proNode=document.getElementById("pro");

/**
* 第四步：遍历xml中获取所有省的节点
*/
/* for循环-----------------------------------开始*/
for(var i=0;i<provincesNode.length;i++){
//获取具体的省节点
var provinceNode = provincesNode[i];
//获取省的名称
var provinceName = provinceNode.getAttribute("name");

/**
* 第五步：创建html中 option元素的节点
*/
var optionNode = document.createElement("option");
//给这个option元素节点赋值
optionNode.setAttribute("value", provinceName);
//设置文本节点
optionNode.appendChild(document.createTextNode(provinceName));

/**
* 第七步：添加到html中select id=pro对应的节点中
*/
proNode.appendChild(optionNode);

};
/* for循环-----------------------------------结束*/
     
 /**
  * 第八步：获取选中的省的名称
  * options[]:通过select属性options返回一个集合 
  * selectedIndex:通过index索引获取下标
  */
var selectProName = proNode.options[proNode.selectedIndex].value;
/**
* 第九步：遍历xml中获取所有省的节点
*/
for(var j=0;j<provincesNode.length;j++){
//获取具体的省节点
var provinceNode = provincesNode[j];
//获取省的名称
var provinceName = provinceNode.getAttribute("name");
/**
* 第十步：判断被选中省的名称与xml中获取的省的名称是否相等
*/
if(selectProName==provinceName){
/**
* 第十一步：如果相等
*        通过省份provinceNode获取xml中city的所有节点 
*/
var citiesNode = provinceNode.getElementsByTagName("city");

/**
* 第十三步：获取html中city对应的节点对象
*/
var cityNode=document.getElementById("city");
/**
* 第十二步：遍历citiesNode的值，获取被选中省份对应sml中所有城市city的文本值
*/
for(var k=0;k<citiesNode.length;k++){

//获取被选中省份对应sml中所有城市city的文本值
var cityName =citiesNode[k].firstChild.nodeValue;
/**
* 第十四步：创建html中 option元素的节点
*/
//创建html中 option元素节点
var optionNode = document.createElement("option");
//给这个option元素节点赋值
optionNode.setAttribute("value", cityName);
//设置文本节点
optionNode.appendChild(document.createTextNode(cityName));
/**
* 第十五步：添加到html中select id=city对应的节点中
*/
cityNode.appendChild(optionNode);
}
}

}
/**
* 第十六步：注册事件  调用selectchange事件处理
* onchange当选择改变时调用事件句
*/
 proNode.οnchange=selectchange;

};
/**
 * 第十六步：处理onchange事件
 */
var selectchange=function(){

/**
*  第二十步：清空的操作
*/
cityNode.length=0;

/**
* 1.获取htmlcity的节点对象
* 2.遍历
*/
//获取html中city对应的节点对象
var cityNode=document.getElementById("city");


for(var j=0;j<provincesNode.length;j++){
//获取具体的省节点
var provinceNode = provincesNode[j];
//获取省的名称
var provinceName = provinceNode.getAttribute("name");
/**
* 第十七步：
* this.value  指向所对应选中的省份
* 1.如果相等的，获取被选中省份对应sml中所有城市city的文本值
* 2.遍历遍历citiesNode的值，获取被选中省份对应sml中所有城市city的文本值
*/
if(this.value==provinceName){
var citiesNode = provinceNode.getElementsByTagName("city");
for(var k=0;k<citiesNode.length;k++){
var cityName =citiesNode[k].firstChild.nodeValue;

/**
* 第十八步：创建html中 option元素的节点
*/
//创建html中 option元素节点
var optionNode = document.createElement("option");
//给这个option元素节点赋值
optionNode.setAttribute("value", cityName);
//设置文本节点
optionNode.appendChild(document.createTextNode(cityName));
/**
* 第十九步：添加到html中select id=city对应的节点中
*/
cityNode.appendChild(optionNode);
}
}

}
};
/**
 * 第二步：1.去获取xml的document对象
 *       2.根据不同的浏览器得到的方式不一样
 *       3.关闭异步，加载china文档
 */
function getXmlDocument(){

//声明一个xmldoucment对象
var xmlDoc;

//根据不同的浏览器得到的方式不一样 
try{
//如果是IE    ActiveXObject  IE浏览器自带的对象
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

}catch(ex){
try{
//firefox,opera浏览器
xmlDoc=document.implementation.createDocument("", "", null);
}catch(ex){

alert("浏览器版本过低了!");
} 
}

//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//解析器加载名为china.xml的xml文档 
xmlDoc.load("china.xml");
return xmlDoc;
}