javascirpt解析xml并实现省市二级联动

最新推荐文章于 2024-07-10 06:14:25 发布

zhiming1164

最新推荐文章于 2024-07-10 06:14:25 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/zhiming1164/article/details/6520628

版权

Code:

<?xml version="1.0" encoding="UTF-8"?>
<cities>
<province name="北京">
<city>大兴</city>
<city>昌平</city>
<city>朝阳</city>
<city>海淀</city>
<city>东城</city>
<city>西城</city>
</province>
<province name="河北">
<city>石家庄</city>
<city>保定</city>
<city>邢台</city>
<city>张家口</city>
<city>廊坊</city>
<city>承德</city>
</province>
<province name="河南">
<city>郑州</city>
<city>安阳</city>
<city>平顶山</city>
<city>开封</city>
<city>商丘</city>
<city>洛阳</city>
</province>
</cities>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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">
</head>
<body>
<span>
<select id="province">
<option>请选择省份</option>
</select>
<select id="cities">
<option>请选择市份</option>
</select>
</span>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var xmlDom;
try{
//针对的是IE浏览器创建一个空的微软 XML 文档对象
xmlDom=new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
xmlDom=document.implementation.createDocument("","",null);
}catch(rt){
alert("加载错误");
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async ="false";
//解析器加载名为 "xxx.xml" 的 XML 文档
xmlDom.load("city.xml");
//获取xml文件的根节点
var root = xmlDom.documentElement;//cities
//获取根节点下面的省节点
var provinces = root.childNodes;
var province = document.getElementById("province");
var cities = document.getElementById("cities");
for(var i=0;i<provinces.length;i++){
//获取省节点的name属性的值
var name = provinces[i].getAttribute("name");
//创建一个option
var opt = document.createElement("option");
//为option添加文本
opt.appendChild(document.createTextNode(name));
//添加到父节点中
province.appendChild(opt);
}
province.onchange = function(){
var pro = document.getElementById("province");
var propros = pro.options;
var pt = pros[pro.selectedIndex];
var names = pt.innerHTML;
for(var i=0;i<provinces.length;i++){
var name1 = provinces[i].getAttribute("name");
if(names==name1){
cities.length=1;
var provs = provinces[i];
var citys = provs.childNodes;
for(var j=0;j<citys.length;j++){
var opt1 = document.createElement("option");
opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
cities.appendChild(opt1);
}
}
}
}
}
</script>

zhiming1164

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascirpt解析xml并实现省市二级联动

Code: xml version="1.0" encoding="UTF-8"?> cities> province name="北京"> city>大兴city> city>昌平city> city>朝阳city>
复制链接

扫一扫