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代码
Nov 10 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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聊天室技术
2006/10/09 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
jQuery each()小议
2010/03/18 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
js中的面向对象入门
2017/03/06 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
基于JavaScript实现随机点名器
2021/02/25 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python易忽视知识点小结
2015/05/25 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
用Python实现数据的透视表的方法
2018/11/16 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python自定义函数def的应用详解
2020/06/03 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
学校岗位设置方案
2014/01/16 职场文书
财政专业求职信范文
2014/02/19 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
小区文明倡议书
2014/05/16 职场文书
教师工作表现评语
2014/12/31 职场文书
美容院员工规章制度
2015/08/05 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python