您的位置：首页 > Web前端 > JavaScript

javascript解析xml文件经典实例，二级下来菜单

2014-10-05 16:44 579 查看

1. xml文件内容

<?xml version="1.0" encoding="GB2312"?>

<china>

<province name="吉林省">

<city>长春</city>

<city>吉林市</city>

<city>四平</city>

<city>松原</city>

<city>通化</city>

</province>

<province name="辽宁省">

<city>沈阳</city>

<city>大连</city>

<city>鞍山</city>

<city>抚顺</city>

<city>铁岭</city>

</province>

<province name="山东省">

<city>济南</city>

<city>青岛</city>

<city>威海</city>

<city>烟台</city>

<city>潍坊</city>

</province>

</china>

2. js解析代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>二级级联</title>

<style type="text/css">

*{ margin: 0; padding: 0; }

body{ padding-top: 50px; }

#box{ width: 600px; margin: 0 auto;}

.left, .right{ float: left; margin: 10px; }

select{ border: 1px solid #ccc; }

</style>

<script type="text/javascript">

//获取xml文件

function parseXML(fileNmae){

var xmlDoc;

try{ //Internet Exporer

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

}catch(e){

try{ //Firefox, Mozilla, Opera, etc

xmlDoc = document.implementation.createDocument("", "", null);

}catch(e){

}

}

//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。

xmlDoc.async=false;

//知解析器加载名为 "note.xml" 的 XML 文档、

xmlDoc.load(fileNmae);

return xmlDoc;

}

function getOption(optionVal){

var option = document.createElement("option");

option.setAttribute("value", optionVal);

option.appendChild(document.createTextNode(optionVal));

return option;

}

window.onload = function(){

var sele_left = document.getElementById("sele_left");

var sele_right = document.getElementById("sele_right");

var xmldoc = parseXML("cities.xml");

var provinces = xmldoc.getElementsByTagName("province");

for(var i = 0; i < provinces.length; i++){

var option = getOption(provinces[i].getAttribute("name"));

sele_left.appendChild(option);

}

sele_left.onchange = function(){

sele_right.length = 1;

for(var i = 0; i < provinces.length; i++){

if(provinces[i].getAttribute("name") == this.value){

var citys = provinces[i].getElementsByTagName("city");

for(var j = 0; j < citys.length; j++){

var option = getOption(citys[j].innerHTML);

sele_right.appendChild(option);

}

}

}

}

}

</script>

</head>

<body>

<div id="box">

<div class="left">

<select name="" id="sele_left">

<option value="none">---请选择---</option>

</select>

</div>

<div class="right">

<select name="" id="sele_right">

<option value="none">---请选择---</option>

</select>

</div>

</div>

</body>

</html>

有不明白或者觉得代码可以改进的亲，请留言共同进步。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航