展会信息港展会大全

javascript读取Xml文件做一个二级联动菜单示例
来源:互联网   发布日期:2016-01-26 11:09:30   浏览:1629次  

导读:这篇文章主要介绍了使用javascript中读取Xml文件做成的一个二级联动菜单,需要的朋友可以参考下代码如下:!DOCTYPE HTML PUBLIC - W3C DTD HTML 4 01 Transitional ENhtmlheadtitlemenu2level ...

这篇文章主要介绍了使用javascript中读取Xml文件做成的一个二级联动菜单,需要的朋友可以参考下

代码如下:

<!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/I0JBQ

kFCMA==/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>

赞助本站

人工智能实验室

相关热词: Xml 联动菜单 javascript

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港