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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
vue实现商城购物车功能
Nov 27 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
ajax请求前端跨域问题原因及解决方案
Oct 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 UTF8 文件的签名问题
2009/10/30 PHP
php5.3 废弃函数小结
2010/05/16 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python统计中文字符数量的两种方法
2019/01/31 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
趣味运动会活动方案
2014/02/12 职场文书
农村婚礼主持词
2014/03/13 职场文书
诚信承诺书
2015/01/19 职场文书
初中教师个人工作总结
2015/02/10 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
厉行节约工作总结
2015/08/12 职场文书
《确定位置》教学反思
2016/02/18 职场文书