Dom和xml的二级联动

lyunabc

浏览: 551443 次
性别:

最近访客更多访客>>

u012363178

jacktan123

403304773

shang2012

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Dom和xml的二级联动：

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

<html>

<head>

<title>example01.html</title>

</head>

<body>

</select>

</select>

</select>

</div>

</body>

</html>

window.onload = function(){

var xmlDoc = parseXml("/day01/cities.xml");

//获取省 xml

var provinceNodes = xmlDoc.getElementsByTagName("province");

//添加省的节点

var provinceNode = document.getElementById("province");

//获取市的节点

var citiesHtmlNode = document.getElementById("city");

// 获取县的节点

//var countryNode = document.getElemnetById("country");

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

//创建option html

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

//获取省的名称

var value = provinceNodes[i].getAttribute("name");

//为option添加文本节点值为省的name属性值

optionNode.appendChild(document.createTextNode(value));

optionNode.setAttribute("value", value); //为添加的option设置值

//添加到节点中

provinceNode.appendChild(optionNode);

}

provinceNode.onchange = function(){

//清空原有的的节点

//获取清空的select里面的所有的option对象

var cityHtmlOptionNodes = citiesHtmlNode.getElementsByTagName("option");//获取的是所有的option

//获取长度

var len = cityHtmlOptionNodes.length;

for (var m = 0; m < len; m++) {

//看是否有第一个对象，【1】代表的第二个对象，如果不为空

if (cityHtmlOptionNodes[1]) {

//始终移除第二个对象

citiesHtmlNode.remove(cityHtmlOptionNodes[1]);

}

//读取省的名称

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

//判断点击的是否是value

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

//通过省节点来找到city节点对象

var citiesNode = provinceNodes[i].getElementsByTagName("city");

//alert(citiesNode);

//遍历city到city的select中

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

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

//为创建的option对象添加文本 citieNodes[j].firstChild.value

cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));

//把创建的对象添加到city中

citiesHtmlNode.appendChild(cityOptionNode);

}

//用js解析xml文件

* html文档是document文档对象节点

* xml 文件需要创建

* 根据不同的浏览器有不同的创建方式

* 在IE中需要一个空间名称来创建

* @param {Object} id

//解析xml文档

function parseXml(filename){

var xmlDoc;

try {

//IE浏览器

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

}

catch (e) {

try {

//非IE浏览器

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

}

catch (ex) {

alert("你使用的是不是浏览器呀！");

}

//解析的时候是异步还是同步,设置为false，是关闭异步加载，这样确保在文档完全加载之前不会继续脚本的执行

xmlDoc.async = false;

xmlDoc.load(filename);

return xmlDoc;

}

</script>

用到的xml文件为：

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

<china>

</city>

</city>

</city>

</city>

</city>

</city>

</province>

</province>

</province>

</province>

</china>

分享到：

Spring多数据源配置 | 代码行数统计程序简要分析

2012-02-22 22:08
浏览 513
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论