javascript读取Xml文件做一个二级联动菜单示例_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:20:55

javascript读取Xml文件做一个二级联动菜单示例_javascript技巧

javascript读取Xml文件做一个二级联动菜单示例_javascript技巧: 代码如下: menu2level.html function loadXML(){ var xmlDoc; try{ //IE xmlDoc=new ActiveXObject(Microsoft.XMLDOM); }catch(e){ try{ xmlDoc = document.implementation.createDocumen

推荐度：

点击下载本文 文档为doc格式

导读javascript读取Xml文件做一个二级联动菜单示例_javascript技巧: 代码如下: menu2level.html function loadXML(){ var xmlDoc; try{ //IE xmlDoc=new ActiveXObject(Microsoft.XMLDOM); }catch(e){ try{ xmlDoc = document.implementation.createDocumen

代码如下:

menu2level.html

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//创建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;iif(provinceArr[i].getAttribute("name")==proName){
proElement = provinceArr[i];
break;
}
}
//获取省份的城市信息
var citiesArr = proElement.getElementsByTagName("city");
var len = citiesArr.length;
for(var i=0;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);
}

效果如下：
http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
cities.xml文件如下：
代码如下:

西安
汉中
宝鸡
延安

佛山
深圳
广州
汕头

大连
铁岭
鞍山
抚顺

javascript读取Xml文件做一个二级联动菜单示例_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签： js 示例实例

热门焦点

javascript读取Xml文件做一个二级联动菜单示例_javascript技巧

javascript读取Xml文件做一个二级联动菜单示例_javascript技巧

javascript读取Xml文件做一个二级联动菜单示例_javascript技巧

最新推荐

猜你喜欢

热门推荐