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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
JS中表单的使用小结
Jan 11 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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数据备份
2014/05/19 PHP
PHP实现搜索相似图片
2015/09/22 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python实现3D地图可视化
2020/03/25 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
德语专业求职信
2014/03/12 职场文书
售房协议书
2014/08/19 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
学校节水倡议书
2015/04/29 职场文书
获奖感言怎么写
2015/07/31 职场文书