JS操作XML对象+城市连动实例
一、JS解析xml文件分析：
a) Html文件和xml文件都是文档，都应该有自己的文档对象，html文件document文档对象节点，而xml需要创建
b) 浏览器分析，不同的浏览器，创建方法不同。
IE： newActiveXObject("控件名称") //Mircrosoft.XMLDOM
非IE，如：firfox
document.implementation.createDocument("","",null)
c) 当创建完毕，必须要设置设置成同步处理
将async设置为false
d) 利用load方法加载xml文件
二、定义固定方法
function parseXml(parseName){
var xmlDoc;
try{
//IE浏览器
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
xmlDoc=document.implementation.createDocument("", "", null);
}catch(e){
alert("创建失败");
}
}
//设置成同步处理
xmlDoc.async=false;
xmlDoc.load(parseName);
return xmlDoc;
}
三、城市连动的源码展示，三级连动
a) Xml文件的节点展示：
<?xml version="1.0" encoding="UTF-8"?> <china> <province name="河北"> <city name="石家庄"> <county>XX县</county> <county>YY县</county> </city> <city name="邢台"> <county>平县</county> <county>XX县</county> </city> <city name="邯郸"> <county>邯郸县</county> <county>永年县</county> <county>肥乡县</county> <county>广平县</county> <county>大名县</county> <county>成安县</county> </city> <city name="保定"> <county>XX县</county> <county>YY县</county> </city> <city name="廊坊"> <county>XX县</county> <county>YY县</county> </city> <city name="衡水"> <county>XX县</county> <county>YY县</county> </city> </province> <province name="北京"> <city name="大兴"> <county>XX县</county> <county>YY县</county> </city> <city name="房山"> <county>XX县</county> <county>YY县</county> </city> <city name="平谷"> <county>XX县</county> <county>YY县</county> </city> <city name="昌平"> <county>XX县</county> <county>YY县</county> </city> <city name="朝阳"> <county>XX县</county> <county>YY县</county> </city> <city name="海淀"> <county>XX县</county> <county>YY县</county> </city> </province> <province name="河南"> <city name="开封"> <county>XX县</county> <county>YY县</county> </city> <city name="商丘"> <county>XX县</county> <county>YY县</county> </city> <city name="驻马店"> <county>XX县</county> <county>YY县</county> </city> <city name="平顶山"> <county>XX县</county> <county>YY县</county> </city> <city name="洛阳"> <county>XX县</county> <county>YY县</county> </city> <city name="郑州"> <county>XX县</county> <county>YY县</county> </city> </province> <province name="安徽"> <city name="阜阳"> <county>XX县</county> <county>YY县</county> </city> <city name="亳州"> <county>XX县</county> <county>YY县</county> </city> <city name="合肥"> <county>XX县</county> <county>YY县</county> </city> </province> </china>b)html源码展示
<!DOCTYPE html>
<html>
<head>
<title>city.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<select id="province">
<option value=-1>请选择省</option>
</select>
<select id="city">
<option value=-1>请选择市</option>
</select>
<select id="county">
<option value=-1>请选择县</option>
</select>
</body>
<script type="text/javascript">
<!--
window.onload=function(){
var xmlDoc=parseXml("cities.xml");
//获取省 xml
var provinceNodes=xmlDoc.getElementsByTagName("province");
//添加省节点 html
var provinceNode=document.getElementById("province");
//添加市节点html
var cityNode=document.getElementById("city");
//添加县节点html
var countyNode=document.getElementById("county");
for(var i=0;i<provinceNodes.length;i++){
var optionNode=document.createElement("option");
optionNode.setAttribute("value",provinceNodes[i].getAttribute("name"));
optionNode.appendChild(document.createTextNode(provinceNodes[i].getAttribute("name")));
provinceNode.appendChild(optionNode);
}
provinceNode.onchange=function(){
//var selectOption=this.options[this.selectedIndex];
//if(this.value!=-1){
//清空市区
removeCity(cityNode);
removeCounty(countyNode);
for(var i=0;i<provinceNodes.length;i++){
if(this.value==provinceNodes[i].getAttribute("name")){
var cityNodes=provinceNodes[i].getElementsByTagName("city");
//清空市区
//cityNode.length=0;
//var optionOne=document.createElement("option");
//optionOne.appendChild(document.createTextNode("请选择市"));
//cityNode.appendChild(optionOne);
//清空 select
//获取你 清空的 select 里边的所有的option节点对象
for(var i=0;i<cityNodes.length;i++){
var optionNode=document.createElement("option");
optionNode.setAttribute("value", cityNodes[i].getAttribute("name"));
optionNode.appendChild(document.createTextNode(cityNodes[i].getAttribute("name")));
cityNode.appendChild(optionNode);
}
}
}
//}
};
cityNode.onchange=function(){
//查找到对应的省份
//if(this.value!=-1){
//清除县
removeCounty(countyNode);
for(var i=0;i<provinceNodes.length;i++){
if(provinceNode.value==provinceNodes[i].getAttribute("name")){
var citiesNodes=provinceNodes[i].getElementsByTagName("city");
for(var j=0;j<citiesNodes.length;j++){
if(this.value==citiesNodes[j].getAttribute("name")){
var countyNodes=citiesNodes[j].getElementsByTagName("county");
for(var m=0;m<countyNodes.length;m++){
var countyOption=document.createElement("option");
countyOption.appendChild(document.createTextNode(countyNodes[m].firstChild.nodeValue));
countyNode.appendChild(countyOption);
}
}
}
}
}
//}
};
};
function removeCity(cityNode){
var cityhtmlOptionNodes = cityNode.getElementsByTagName("option");
//获取长度
var len = cityhtmlOptionNodes.length;
//遍历
for(var m=0;m<len;m++){
// 0 是有第二个对象 cityhtmlOptionNodes[1] 代表第二个对象 不为null true null false
if(cityhtmlOptionNodes[1]){
//始终移除第二个对象
cityNode.removeChild(cityhtmlOptionNodes[1]);
}
}
}
function removeCounty(countyNode){
//清除县
var countyOptionNodes = countyNode.getElementsByTagName("option");
//获取长度
var len = countyOptionNodes.length;
//遍历
for(var m=0;m<len;m++){
// 0 是有第二个对象 cityhtmlOptionNodes[1] 代表第二个对象 不为null true null false
if(countyOptionNodes[1]){
//始终移除第二个对象
countyNode.removeChild(countyOptionNodes[1]);
}
}
}
//JS解析xml文件
/*
* html文件 document 文档对象 节点
* xml 文件 需要创建
* 不同浏览器 创建方法不同
* IE: new ActiveXObject("控件名称");//Microsoft.XMLDOM
* firfox 非IE
* document.implementation.createDocument("","",null);
*/
//声明解析XML文件方法
function parseXml(parseName){
var xmlDoc;
try{
//IE浏览器
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
xmlDoc=document.implementation.createDocument("", "", null);
}catch(e){
alert("创建失败");
}
}
//设置成同步处理
xmlDoc.async=false;
xmlDoc.load(parseName);
return xmlDoc;
}
//-->
</script>
</html>