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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
详解TS数字分隔符和更严格的类属性检查
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使用PHPexcel导入导出数据的方法
2015/11/14 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
在Python的web框架中配置app的教程
2015/04/30 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
最新大学生创业计划书写作攻略
2014/04/02 职场文书
导师对论文的学术评语
2015/01/04 职场文书
看上去很美观后感
2015/06/10 职场文书
新员工入职感言范文!
2019/07/04 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL