js技术实现html页面解析xml文档的级联下拉列表操作

最新推荐文章于 2018-09-07 11:33:38 发布

ABCJIECBA

最新推荐文章于 2018-09-07 11:33:38 发布

阅读量4.2k

点赞数

文章标签： xml 文档 html stylesheet function 浏览器

本文链接：https://blog.csdn.net/ABCJIECBA/article/details/6265082

版权

实现效果：

点击北京，出现的是北京的各个区，点击河北省出现河北省的各个市...

详细解析如下：

案例：

city.xml

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

</province>

</province>

</province>

</cities>

city.html:

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

<html>

<head>

</head>

<body>

<h1>

解析xml文件实现省市级联下拉菜单

</h1>

<div>

请选择省

</option>

</select> </span>

请选择相应省下面的市

</option>

</select> </span>

</div>

</body>

</html>

window.onload = function() {

var xmlDom;

try {

//针对的是IE浏览器创建一个空的微软 XML 文档对象

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

} catch (err) {

try {

//在 Firefox 及其他浏览器中的 XML 解析器

//创建一个空的 XML 文档对象。

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

} catch (e) {

}

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

xmlDom.async = "false";

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

xmlDom.load("city.xml");

//获取xml文件的根节点

var root = xmlDom.documentElement;

//获取根节点下面的省节点

var provinces = root.childNodes;

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

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

//获取省节点的name属性的值

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

//创建一个option

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

//为option添加文本

opt.appendChild(document.createTextNode(name));

//添加到父节点中

province.appendChild(opt);

}

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

province.onchange = function() {

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

var opts = pce.options;

var opt1 = opts[pce.selectedIndex];

var name = opt1.innerHTML;

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

//获取省节点的name属性的值

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

if (name == name1) {

cities.length=1;//每次改变的时候清空

var pros = provinces[i];

var citys = pros.childNodes;

alert(citys.length+"====================");

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

//创建一个option

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

//为option添加文本

opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));

//添加到父节点中

cities.appendChild(opt1);

}

</script>

ABCJIECBA

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js技术实现html页面解析xml文档的级联下拉列表操作

js实现xml文档的解析，级联操作，实现对应省份对应市的下拉列表
复制链接

扫一扫