- 1、加载 XML 的方式
- //IE浏览器
- var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
- //firefox 其他浏览器
- 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.οnchange=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;
}