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确认删除对话框效果的示例代码
Feb 20 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
基于node.js之调试器详解
Aug 22 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 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 无限级分类
2017/05/04 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python简单计算文件夹大小的方法
2015/07/14 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Django框架视图函数设计示例
2019/07/29 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
医学院毕业生自荐信
2013/11/08 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
物业接待员岗位职责
2015/04/15 职场文书
教师见习总结范文
2015/06/23 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
PHP策略模式写法
2021/04/01 PHP
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏