<body>
<div align="center">
<div id="data">
<select id="province">
<option>
请选择省
</option>
</select>
<select id="city">
<option>
请选择市
</option>
</select>
</div>
</div>
</body>
首先创建一个xml文件
<?xml version="1.0"encoding="UTF-8"?>
<china>
<province name="河北">
<city>石家庄</city>
<city ">廊坊</city>
<city>保定</city>
<city>邢台</city>
<city>邯郸</city>
</province>
<province name="北京" value="北京">
<city>大兴</city>
<city>房山</city>
<city>昌平</city>
<city>朝阳</city>
<city>海淀</city>
</province>
<province name="河南" value="河南">
<city>开封</city>
<city>商丘</city>
<city>驻马店</city>
<city>平顶山</city>
<city>洛阳</city>
<city>郑州</city>
</province>
<province name="安徽" value="安徽">
<city>阜阳</city>
<city>亳州</city>
<city>合肥</city>
</province>
</china>
在html中解析xml文件
//解析xml文件
function parseXml(filename){
var xmlDoc;
try{
//IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
//非IE浏览器
xmlDoc =document.implementation.createDocument("","",null);
}catch(ex){
alert("你使用的是不是浏览器呀!");
}
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
//同步是在xml文档解析完成之后再继续执行
xmlDoc.async=false;
xmlDoc.load(filename);
return xmlDoc;
var xmlDoc = parseXml("citys.xml");
//获取省的名字 xml
var provinceNodes =xmlDoc.getElementsByTagName("province");
//添加省的节点 html
var provinceNode =document.getElementById("province");
//添加市的节点
var citieshtmlNode=document.getElementById("city");
for(var i=0;i<provinceNodes.length;i++){
//创建option html
var optionNode = document.createElement("option");
var value=provinceNodes[i].getAttribute("name");//获取省的名称
//为option 添加文本节点 值为省的name属性的值 optionNode.appendChild(document.createTextNode(value));//option子节点的内容设置为省的名字
optionNode.setAttribute("value",value);//把这个省的名字设置为option的value值
//添加到节点中
provinceNode.appendChild(optionNode);
}
//当省发生变化时,选择对应的市
provinceNode.onchange = function(){
//获取你清空的select里面的所有的option节点对象
var cityhtmlOptionNodes=citieshtmlNode.getElementsByTagName("option");
//获取长度
var len=cityhtmlOptionNodes.length;
//遍历
for(var m=0;m<len;m++){
//是否有两个对象 请选择市不删除 cityhtmlOptionNodes[1]代表第二个对象,不为null true
if(cityhtmlOptionNodes[1]){
//始终移除第二个对象
citieshtmlNode.removeChild(cityhtmlOptionNodes[1]);
}
}
//遍历所有的省 节点对象
for(var j=0;j<provinceNodes.length;j++){
//判断节点对象的值等于省节点的值 则获取该节点下面的所有的city节点对象
if(this.value==provinceNodes[j].getAttribute("name")){//获取省的名字
//获取所有的city节点对象
var citiesNode= provinceNodes[j].getElementsByTagName("city");
//遍历city节点对象
for(var i=0;i<citiesNode.length;i++){
//创建city节点对象 option
var cityOptionNode=document.createElement("option");
//为创建的 option节点对象添加文本
cityOptionNode.appendChild(document.createTextNode(citiesNode[i].firstChild.nodeValue));
//把创建的 option添加到指定的节点对象中
citieshtmlNode.appendChild(cityOptionNode);
}
}
}
}