JSDom加载解析XML文件——下拉列表二级联动篇

最新推荐文章于 2021-02-18 10:03:02 发布

Vzr_Lou

最新推荐文章于 2021-02-18 10:03:02 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： xml function xhtml html 文档浏览器

本文链接：https://blog.csdn.net/laughing_vzr/article/details/6265468

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以前在项目中实现二级联动是通过单纯的JS方法，在对JS的深度了解中发现通过JSDom加载写好的XML文件也可以实现二级联动，这也不失为一种好的方法，下面就跟大家分享一下。

首先，我们来看下要呈现的效果：

联动效果1

联动效果2

联动效果3

好，我们来看下需要的一个简单的XML文件：

XML文件源码

我们可以看到该XML文档有三层：

根节点：cities

子节点：province

子节点：city

Province节点拥有一个Name属性

下面我们来看下JS的源码：

HTML源码：

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市联动</title> </head> <body> <select id="province" style="width:100px; background:#CCC;"> <option>--请选择省--</option> </select> <select id="city" style="width:100px; background:#CCC;"> <option>--请选择市--</option> </select> </body> <mce:script type="text/javascript" src="city.js" mce_src="city.js"></mce:script> </html>

注意：这段js脚本代码仅支持IE浏览器（本人使用IE9测试），还有其中的XML加载路径，我的是默认在本站也就是同一个文件夹内；

此外，当再次点击“请选择省“这个选项时，右侧市的选择框会停留在你上一次点击的省的下属市上不会做改变，这也算一个小小的bug吧，大家见谅，有解决的请回复我。

Vzr_Lou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSDom加载解析XML文件——下拉列表二级联动篇

<br /> <br />以前在项目中实现二级联动是通过单纯的JS方法，在对JS的深度了解中发现通过JSDom加载写好的XML文件也可以实现二级联动，这也不失为一种好的方法，下面就跟大家分享一下。<br />首先，我们来看下要呈现的效果：<br /><br /><br /><br />好，我们来看下需要的一个简单的XML文件：<br /><br />我们可以看到该XML文档有三层：<br />根节点：cities<br />子节点：province<br />子节点：city<br />Province节点
复制链接

扫一扫