主要学习下javascript对XML的操作
代码如下：
<script type="text/javascript">
window.onload = function() {
var xmlDoc = parseXml("images/cities.xml");
//获取XML的节点
var provinceNodes = xmlDoc.getElementsByTagName("province");
//获取省的节点
var provinceNode = document.getElementById("province");
//获取市的节点
var citiesHtmlNode = document.getElementById("city");
for ( var i = 0; i < provinceNodes.length; i++) {
//创建option 下拉框值
var optionNode = document.createElement("option");
//获取省的名称
var value = provinceNodes[i].getAttribute("name");
//为option添加文本节点 值为省的name属性值
optionNode.appendChild(document.createTextNode(value));
optionNode.setAttribute("value", value); //为添加的option设置值
//添加到provinceNode节点中
provinceNode.appendChild(optionNode);
}
provinceNode.onchange = function() {
//清空原有的的节点
//获取清空的select里面的所有的option对象
var cityHtmlOptionNodes = citiesHtmlNode
.getElementsByTagName("option");//获取的是所有的option
//获取长度
var len = cityHtmlOptionNodes.length;
for ( var m = 0; m < len; m++) {
//看是否有第一个对象，【1】代表的第二个对象，如果不为空
if (cityHtmlOptionNodes[1]) {
//始终移除第二个对象
citiesHtmlNode.remove(cityHtmlOptionNodes[1]);
}
}
for (var i = 0; i < provinceNodes.length; i++) {
//判断点击的是否是value
if (this.value == provinceNodes[i].getAttribute("name")) {
var citiesNode = provinceNodes[i].getElementsByTagName("city");
for (var j = 0; j < citiesNode.length; j++) {
var cityOptionNode = document.createElement("option");
// alert(citiesNode.length);
//为创建的option对象添加文本 citieNode[j].firstChild.value
cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));
//把创建的对象添加到city中
citiesHtmlNode.appendChild(cityOptionNode);
}
}
}
}
}
//解析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("你使用的是不是浏览器呀！");
}
}
//解析的时候是异步还是同步,设置为false，是关闭异步加载，这样确保在文档完全加载之前不会继续脚本的执行
xmlDoc.async = false;
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</head>
<body>
<div align="center">
<div id="data">
<select id="province">
<option>
请选择省
</option>
</select>
<select id="city">
<option>
请选择市
</option>
</select>
<select id="country">
<option>
请选择市
</option>
</select>
</div>
</div>
</body>
</html>
用到的xml文件为：
<?xml version="1.0" encoding="GBK"?>
<china>
<province name="河北">
<city name="石家庄">
</city>
<city name="廊坊">
</city>
<city name="保定">
</city>
<city name="邢台">
</city>
<city name="沧州">
</city>
<city name="衡水">
</city>
</province>
<province name="北京">
<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>
</province>
</china>
分享到：
相关推荐
代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD ... <head> <title>.../title>... [removed] function loadXML(){ var xmlDoc; try{ //IE xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
• sample08.htm 使用外部脚本文件和嵌入的JavaScript代码 • sample09.htm 边加载边解析的JavaScript代码 • sample10.htm 先加载后解析的JavaScript代码 • sample11.htm 单行...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口...
05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery...
11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口...