javascript读取Xml文件做一个二级联动菜单示例


Posted in Javascript onMarch 17, 2014
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>menu2level.html</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
function loadXML(){ 
var xmlDoc; 
try{ 
//IE 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
}catch(e){ 
try{ 
xmlDoc = document.implementation.createDocument("","",null); 
}catch(e){ 
alert(e.message); 
return; 
} 
} 
xmlDoc.async=false; 
xmlDoc.load("cities.xml"); 
return xmlDoc; 
} 
//网页加载完在加载 完成省份加载 
onload=function(){ 
var xmlDocument = loadXML(); 
var provinceArr =xmlDocument.getElementsByTagName("province"); 
var proSize = provinceArr.length; 
for(var i=0;i<proSize;i++){ 
//创建option节点 
var optionElement = document.createElement("option"); 
var provinceName = provinceArr[i].getAttribute("name"); 
//创建文本节点 
var textElement =document.createTextNode(provinceName); 
optionElement.appendChild(textElement); 
optionElement.setAttribute("value", provinceName); 
var node = document.getElementById("province"); 
node.appendChild(optionElement); 
} 
} 
//省份改变事件 
function changeProvince(node){ 
//获取选择的角标 
var index = node.selectedIndex; 
//获取对应的省份名 
var provinceName = node.options[index].value; 
loadCities(provinceName); 
} //根据省份编号加载城市信息 
function loadCities(proName){ 
var xmlDocument = loadXML(); 
var provinceArr =xmlDocument.getElementsByTagName("province"); 
//获取城市的元素 
var citySelectEle = document.getElementById("cities"); 
var size = citySelectEle.options.length; 
for(var i=size;i>0;i--){ 
citySelectEle.remove(i); 
} 
//获取省份的个数 
var proSize = provinceArr.length; 
var proElement; 
//获取对应的省份元素 
for(var i=0;i<proSize;i++){ 
if(provinceArr[i].getAttribute("name")==proName){ 
proElement = provinceArr[i]; 
break; 
} 
} 
//获取省份的城市信息 
var citiesArr = proElement.getElementsByTagName("city"); 
var len = citiesArr.length; 
for(var i=0;i<len;i++){ 
//创建option节点 
var optionElement = document.createElement("option"); 
//获取城市名 
var cityName = citiesArr[i].firstChild.nodeValue; 
//创建文本节点 
var textElement =document.createTextNode(cityName); 
optionElement.appendChild(textElement); 
optionElement.setAttribute("value", cityName); 
citySelectEle.appendChild(optionElement); 
} 
} 
function getValue(){ 
var pro = document.getElementById("province").value; 
var city = document.getElementById("cities").value; 
alert(pro+":"+city); 
} 
</script> 
</head> 
<body> 
<select id="province" onchange="changeProvince(this)"> 
<option value="" selected="selected">--省份--</option> 
</select> 
<select id="cities"> 
<option value="" selected="selected">--城市--</option> 
</select> 
<input type="button" value="弹出" onclick="getValue()"/> 
</body> 
</html>

效果如下:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
cities.xml文件如下:
<?xml version="1.0" encoding="UTF-8"?> 
<xml-body> 
<province name="陕西"> 
<city>西安</city> 
<city>汉中</city> 
<city>宝鸡</city> 
<city>延安</city> 
</province> 
<province name="广东"> 
<city>佛山</city> 
<city>深圳</city> 
<city>广州</city> 
<city>汕头</city> 
</province> 
<province name="辽宁"> 
<city>大连</city> 
<city>铁岭</city> 
<city>鞍山</city> 
<city>抚顺</city> 
</province> 
</xml-body>
Javascript 相关文章推荐
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
js判断两个数组相等的5种方法
May 06 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 #Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 #Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 #Javascript
获取当前点击按钮的id用this.id实现
Mar 17 #Javascript
jquery如何根据值设置默认的选中项
Mar 17 #Javascript
jquery插件开发之实现md5插件
Mar 17 #Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 #Javascript
You might like
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
js查找节点的方法小结
2015/01/13 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
js转换对象为xml
2017/02/17 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
python实现学生管理系统开发
2020/07/24 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
工程招投标邀请书
2014/01/30 职场文书
争先创优心得体会
2014/09/12 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
华山导游词
2015/02/03 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
Python Pandas常用函数方法总结
2021/06/15 Python