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 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
js 函数的副作用分析
Aug 23 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 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+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
python实现获取序列中最小的几个元素
2014/09/25 Python
python连接MySQL数据库实例分析
2015/05/12 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python 标准差计算的实现(std)
2019/07/29 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python实现一个论文下载器的过程
2021/01/18 Python
Python实现简单的2048小游戏
2021/03/01 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
2014年卫生工作总结
2014/11/27 职场文书
小学教师自我评价
2015/03/04 职场文书
小学课改工作总结
2015/08/13 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书