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学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
详解参数传递四种形式
Jul 21 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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 数据库树的遍历方法
2009/02/06 PHP
php之XML转数组函数的详解
2013/06/07 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
一分钟理解js闭包
2016/05/04 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
js回调函数原理与用法案例分析
2020/03/04 Javascript
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
使用python进行拆分大文件的方法
2018/12/10 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
应届生自我鉴定
2013/12/11 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
给老师的感谢信
2015/01/20 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
opencv检测动态物体的实现
2021/07/21 Python