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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
js实现简单扫雷
Nov 27 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
如何在存储过程中使用Loop
2016/01/05 面试题
团结就是力量演讲稿
2014/05/21 职场文书
事业单位鉴定材料
2014/05/25 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
限期整改通知书
2015/04/22 职场文书
城南旧事观后感
2015/06/11 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电