您的位置：首页 > 编程语言 > Java开发

Java乔晓松-js解析xml文件实现select二级联动

2013-03-13 23:36 656 查看

xml文档：

<?xml version="1.0" encoding="UTF-8"?>

<china>

<province name="请选择城市">

<city>请选择市区</city>

</province>

<province name="北京市">

<city>海淀区</city>

<city>朝阳区</city>

<city>大兴区</city>

<city>昌平区</city>

</province>

<province name="天津市">

<city>北辰区</city>

<city>和平区</city>

<city>虹桥区</city>

<city>AA区</city>

</province>

<province name="上海市">

<city>BB区</city>

<city>CC区</city>

<city>DD区</city>

<city>MM区</city>

</province>

</china>

js文件的原码：

window.onload = function() {

var xmlDoc = getXmlDocument("./js/citys.xml");

// alert(xmlDoc);

var china = xmlDoc.documentElement;

// alert(china);

var provincesXMLNode = china.getElementsByTagName("province");

var provinceHTMLNode = $("province");

var cityHTMLNode = $("city");

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

var provinceXMLNode = provincesXMLNode[i];

var provinceXMLNodeName = provinceXMLNode.getAttribute("name");

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

option.setAttribute("value", provinceXMLNodeName);

var optionText = document.createTextNode(provinceXMLNodeName);

option.appendChild(optionText);

provinceHTMLNode.appendChild(option);

}

provinceHTMLNode.onchange = function() {

var cNodes = provinceHTMLNode.childNodes;

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

var optionselect = cNodes[i];

if(optionselect.nodeType==1){

if(optionselect.selected){

var proname = optionselect.getAttribute("value");

for(var k=0;k<provincesXMLNode.length;k++){

var proXML = provincesXMLNode[k];

var provalue = proXML.getAttribute("name");

if(proname==provalue){

for(var jj=0;jj<cityHTMLNode.childNodes.length;){

cityHTMLNode.removeChild(cityHTMLNode.childNodes[jj]);

}

var cityXMLNode = proXML.childNodes;

//遍历

for(var n=0;n<cityXMLNode.length;n++){

var cXMLNode=cityXMLNode
;

if(cXMLNode.nodeType==1){

//alert();

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

var cityopTextNode = document.createTextNode(cXMLNode.firstChild.nodeValue);

cityop.appendChild(cityopTextNode);

cityHTMLNode.appendChild(cityop);

}

}

}

}

}

}

}

};

};

function $(id) {

return document.getElementById(id);

}

function getXmlDocument(fileName) {

var xmlDomcument;

try {

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

} catch (e) {

try {

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

} catch (e) {

alert("浏览器版本过低。。。。");

}

}

// 关闭异步加载，确保完全加载再解析

xmlDomcument.async = false;

// 装载文件

xmlDomcument.load(fileName);

return xmlDomcument;

}

html页面的原码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>js_city.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

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



<script type="text/javascript" src="./js/js_xml.js"></script>

</head>

<body>

<div align="center">

<select id="province"></select>

<select id="city">

<option>请选择市区</option>

</select>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航