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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
js常用代码段整理
Nov 30 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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中time()和mktime()方法的区别
2013/09/28 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python struct模块解析
2014/06/12 Python
python读取中文txt文本的方法
2018/04/12 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
Python如何定义一个函数
2015/09/01 面试题
商务日语专业自荐信
2014/04/17 职场文书
初中同学会活动方案
2014/08/22 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js