使用javascript中读取Xml文件做成的一个二级联动菜单

最新推荐文章于 2021-11-16 11:14:20 发布

liuhenghui5201

最新推荐文章于 2021-11-16 11:14:20 发布

阅读量3.2k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/liuhenghui5201/article/details/21303551

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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;
		}
		//网页加载完在加载  完成省份加载
		οnlοad=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" οnchange="changeProvince(this)">
  	<option value="" selected="selected">--省份--</option>
  </select>
  <select id="cities">
  	<option value="" selected="selected">--城市--</option>
  </select>
  <input type="button" value="弹出" οnclick="getValue()"/> 
  </body>
</html>

效果如下：

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>

liuhenghui5201

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
使用javascript中读取Xml文件做成的一个二级联动菜单

menu2level.html function loadXML(){ var xmlDoc; try{ //IE xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); }catch(e){ try{ xmlDoc = document.implementation.createDocume
复制链接

扫一扫

专栏目录