javascript读取Xml文件做一个二级联动菜单示例
javascript读取Xml文件做一个二级联动菜单示例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:menu2level.htmlfunctionloadXML(){varxmlDoc;try{//IExmlDoc=new...

复制代码 代码如下:

<!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="弹出"/>

</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教程学习
编程开发子分类