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 事件对象属性小结
Apr 27 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
angularJS开发注意事项
May 26 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 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 CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Python环境变量设置方法
2016/08/28 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
在python中bool函数的取值方法
2018/11/01 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python龙贝格法求积分实例
2020/02/29 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
应届毕业生通用的自荐书范文
2014/02/07 职场文书
亮化工程实施方案
2014/03/17 职场文书
党风廉政建设责任书
2014/04/14 职场文书
关爱残疾人标语
2014/06/25 职场文书
男生贾里读书笔记
2015/06/30 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Java 异步任务计算FutureTask
2022/04/28 Java/Android