HTML中的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testcity.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">-->
<script type="text/javascript">
window.onload = function() {
var xmlDao
try {
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDao = new ActiveXObject("Microsoft.XMLDOM");
} catch (err) {
try {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
} catch (e) {
}
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDao.async = "false";
//加载city.xml文档
xmlDao.load("city.xml");
//获取xml文档中的跟节点
var root = xmlDao.documentElement;
//获取xml文档中根节点的所有子节点
var sheng = root.childNodes;
//获取Htlm中province标签对象
var province = document.getElementById("province");
for ( var i = 0; i < sheng.length; i++) {
//获取xml文档中的省节点的name值
var name = sheng[i].getAttribute("name");
//创建标签option
var op = document.createElement("option");
//创建一个文本节点,文本节点的值为xml文档中的省节点的name值并将文本节点添加到option节点中
op.appendChild(document.createTextNode(name));
//将option节点添加到province节点中
province.appendChild(op);
}
//获取Htlm中标签ID为cities的对象
var city = document.getElementById("cities");
//为省创建事件
province.onclick = function() {
//获取Htlm中标签ID为province的对象
var province = document.getElementById("province");
//获取province中所有option标签对象
var pro = province.options;
//获取所选中的标签对象
var opre = pro[province.selectedIndex];
//获取其中文本的值
var name = opre.innerHTML;
for ( var i = 0; i < sheng.length; i++) {
//获取省节点中所有的子节点
var name1 = sheng[i].getAttribute("name");
//判断选中的值跟省节点中某一个子节点是否相等
if (name1 == name) {
//每次改变的时候清空
city.length = 1;
//获取xml文档中某一个省节点中所有的子节点
var cit = sheng[i].childNodes;
for ( var i = 0; i < cit.length; i++) {
//创建标签option
var pt = document.createElement("option");
//创建一个文本节点,文本节点的值为xml文档中的省节点中某一个子节点的第一个子节点的name值并将文本节点添加到option节点中
pt.appendChild(document
.createTextNode(cit[i].firstChild.nodeValue));
//将option节点添加到city节点中
city.appendChild(pt);
}
}
}
}
}
</script>
</head>
<body>
<h1>
解析xml文件实现省市级联下拉菜单
</h1>
<div>
<span> <select id="province" name="province">
<option>
请选择省
</option>
</select> </span>
<span> <select id="cities" name="city">
<option>
请选择相应省下面的市
</option>
</select> </span>
</div>
</body>
</html>
简单的XML文档:
<?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>
分享到:
相关推荐
css+javascript+xml实现二级菜单
JavaScript+xml实现下拉二级联动菜单 JavaScript+xml实现下拉二级联动菜单
省市区热点四级联动javascript+xml省市区热点四级联动javascript+xml省市区热点四级联动
不推荐下载,该版本存在较多问题 推荐下载笔者的新发布的该版本,名称为xmlhttp_asp+javascript+json+xml
C#网站开发案例详解 基于Ajax+CSS+JavaScript+XML技术 源码
javascript+xml无线级树形菜单
前台需要的一些帮助文档HTML+CSS+JavaScript+XML等的帮助文档
使用javaScript实现省市级联(二级级联,不能三级级联)
web大作业 基于HTML+JavaScript+Layui实现的电商网站源码(19页) web大作业 基于HTML+JavaScript+Layui实现的电商网站源码(19页) web大作业 基于HTML+JavaScript+Layui实现的电商网站源码(19页) web大作业 基于...
HTML+CSS+JavaScript+XML等的帮助文档
使用Javascript实现的省市级联下拉列表菜单,是常用的。。。。。
早期的参考资料,我仍在使用 DHTML+CSS2+JAVASCRIPT+XML
使用JavaScript+XML+XSL创建树形目录,源码及示例
Javascript+CSS实现的弧形导航二级菜单,外观漂亮实用。
该资源包括css+javaScript+jQuery+html5+xml的全部chm中文API,是web开发必备的参考学习文档。
C#网站开发案例详解 基于Ajax+CSS+JavaScript+XML
javascript+xml树形菜单,因目前只会用IE加载和解析XML,故只有IE能用
javascript省市级联 第一次上传 请多多支持
用JavaScript写的HTML版的级联,各省市都有....
全部代码来源于我近期的一个项目,客户要求论坛必须有侧边导航栏,我于是想到用框架来实现。"mainFrame"是主显框架的ID及name属性。读者可灵活修改。(作者注[2011年6月14日]:这是我三年前写的代码,代码质量比较差...