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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
Vue.js 踩坑记之双向绑定
May 03 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
php链式操作的实现方式分析
2019/08/12 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
用JS实现的一个include函数
2007/07/21 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
Js 中debug方式
2010/02/07 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python3 下载网络图片代码实例
2019/08/27 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
通用C#笔试题附答案
2016/11/26 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
自荐信格式
2013/12/01 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
学生周末长期请假条
2014/02/15 职场文书
出生公证委托书
2014/04/03 职场文书
艺术节开幕词
2015/01/28 职场文书
关于颐和园的导游词
2015/01/30 职场文书
公司更名通知函
2015/04/24 职场文书
开学第一天的感想
2015/08/10 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript