省市联动问题及在html中解析xml文件

最新推荐文章于 2024-09-18 22:26:47 发布

w_l_j

最新推荐文章于 2024-09-18 22:26:47 发布

阅读量3.9k

点赞数 1

文章标签： xml html 浏览器 function encoding 文档

本文链接：https://blog.csdn.net/w_l_j/article/details/7286725

版权

<body>

请选择省

</option>

</select>

请选择市

</option>

</select>

</div>

</body>

首先创建一个xml文件

<?xml version="1.0"encoding="UTF-8"?>

<china>

</province>

</province>

</province>

</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);

}

w_l_j

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫