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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 的 with 语句详解
2014/06/13 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
itchat接口使用示例
2017/10/23 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python简单I/O操作示例
2019/03/18 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
C语言笔试题回忆
2015/04/02 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
民族团结好少年事迹材料
2014/08/19 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
七个Python必备的GUI库
2021/04/27 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers