jinhailion
- 浏览: 47853 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (46)
- 下载收藏 (1)
- 测试 (0)
- jdbc (0)
- jsp jdbc (1)
- 记些东西。 (0)
- afadfadf (0)
- javascript (1)
- ssh (0)
- extjs (2)
- test (0)
- jquery (1)
- jqmobile (0)
- 123 (0)
- 微博 (1)
- 日语 (0)
- drupal (0)
- java基础 (1)
- java面试 (0)
- shell (1)
- css (1)
- hcl取件 (0)
- php (2)
- yii (0)
- javascript html5 (3)
- photoshop (0)
- 非技术 (1)
- 吉他 (0)
- 健康 (0)
- 微信 (0)
- reactjs (0)
- php linux (0)
- nodejs (0)
- es6 (1)
- angular (0)
- webpack (0)
- storybook react组件化 (0)
- webstorm (0)
- h5 (0)
- php nginx (0)
- 兼容性 (0)
- karma phantom mocha chai 单元测试 (0)
- 开发 (0)
- 面试 (0)
- php mac (0)
- git (0)
- 博客 (0)
- js (0)
- https ssl (0)
- react redux es6 (0)
- 111 (0)
- promise javascript (0)
- fis3 构建 打包 (0)
- es7 async (0)
- flex (0)
- react-router (0)
- npm (0)
- react (0)
- guitar (0)
- rem (0)
- 设计模式 (0)
- 原型 prototype (0)
- web知识 (0)
- withCredentials (0)
- css flex (0)
- vue vuex (0)
- charles (0)
- babel (0)
- koa2 mock (0)
- 柯里化 (0)
- 正则 (0)
- restful (0)
- web (0)
- xss csrf (1)
- webpack rollup (1)
- redux-saga (0)
- 原理 (0)
- 1111 (0)
最新评论
-
eddie_520：
特意登录上来发表一句，牛逼
Joomla中jQuery和Mootools解决冲突 -
353386051：
ExtJs菜鸟，表示不会写这样的代码，只会create/new ...
extjs4.1 mvc
使用javascript解析xml实现省市县三级联动
（适用于任何常用浏览器）
<body>
<div>
<span>
<select id="sheng" style="width: 100px"></select>
</span>
<span>
<select id="shi" style="width: 100px"></select>
</span>
<span>
<select id="xian" style="width: 100px"></select>
</span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
function getXmlDoc(){
var xmlDoc;
try{
//给IE浏览器 创建一个空的微软 XML文档对象
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//在 Firefox及其他浏览器(opera)中的 XML解析器创建一个空的 XML文档对象。
xmlDoc=document.implementation.createDocument("","",null);
}catch(er){
alert("所使用的浏览器版本太低了,该换更新了");
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//解析器加载名为 "xxx.xml" 的 XML 文档
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload=function(){
var xmlDoc=getXmlDoc();
//获取xml文件的根节点
var root=xmlDoc.documentElement;
//获取xml文件的根节点下面的省节点
var provinces=root.childNodes;
//获取页面中要显示的省、市和县的控件dom对象
var sheng=document.getElementById("sheng");
var shi=document.getElementById("shi");
var xian=document.getElementById("xian");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性 问 题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(provinces[i].nodeType==1){
//创建一个option节点对象
var shengopt=document.createElement("option");
//为option省节点添加文本 shengopt.appendChild(document.createTextNode(provinces[i].getAttr ibute("name")));
//为option省节点设置属性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode "));
//添加省到页面dom对象中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时 触发事件
sheng.onchange=function(){
//获取省节点所有的option对象的集合
var shengs=sheng.options;
//获取选中option对象的selectedIndex(下标值)
var num=shengs.selectedIndex;
//清空市 区
shi.length=0;
xian.length=0;
//根据选中的省获取其value值的内容 即xml文件中的postcode对应的 值
var ppostcode=shengs[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点)
if(provinces[i].nodeType==1){
//根据省获取其postcode值的内容 即html文件中的value对应 的值
var postcode=provinces[i].getAttribute("postcode");
if(postcode==ppostcode){
//获取省节点的子节点
var cities=provinces[i].childNodes;
//清空
shi.length=0;
//遍历所有的市
for(var i=0;i<cities.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览 器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(cities[i].nodeType==1){
//创建一个option节点对象
var shiopt=document.createElement("option");
//为option市节点添加文本 shiopt.appendChild(document.createTextNode(cities[i].getAttribute ("name")));
//为option市节点设置属性
shiopt.setAttribute("value", cities[i].getAttribute("postcode"));
//添加市到页面dom对象中
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
//当市节点发生改变时 触发事件
shi.onchange=function(){
//获取市节点所有的option对象的集合
var shis=shi.options;
//获取选中option对象的selectedIndex(下标值)
var num=shis.selectedIndex;
//根据选中的市获取其value值的内容 即xml文件中的postcode对应的 值
var spostcode=shis[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点)
if(provinces[i].nodeType==1){
//获取省节点的子节点
var cities=provinces[i].childNodes;
//遍历所有的市
for(var j=0;j<cities.length;j++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之 间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(cities[j].nodeType==1){
//根据市获取其postcode值的内容 即html文件中的 value对应的值
var postcode=cities[j].getAttribute("postcode");
if(postcode==spostcode){
//清空
xian.length=0;
//获取市节点的子节点
var areas=cities[j].childNodes;
//遍历所有的区(县)
for(var k=0;k<areas.length;k++){
//查看该节点是否是元素节点 也是为了实现不 同浏览器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(areas[k].nodeType==1){
//创建一个option节点对象
var xianopt=document.createElement("option");
//为option区节点添加文本
xianopt.appendChild(document.createTextNode(areas[k].getAttribute ("name")));
//为option区节点设置属性
xianopt.setAttribute("value", areas[k].getAttribute("postcode"));
//添加区到页面dom对象中
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>
Xml文件（简写版）
<root name="中国">
<province name="请选择省" postcode="100000" >
<city name="请选择市" postcode="100100" >
<area name="请选择区" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市辖区" postcode="110100" >
<area name="东城区" postcode="110101" />
<area name="西城区" postcode="110102" />
<area name="崇文区" postcode="110103" />
<area name="宣武区" postcode="110104" />
<area name="朝阳区" postcode="110105" />
<area name="丰台区" postcode="110106" />
<area name="石景山区" postcode="110107" />
<area name="海淀区" postcode="110108" />
<area name="门头沟区" postcode="110109" />
<area name="房山区" postcode="110111" />
<area name="通州区" postcode="110112" />
<area name="顺义区" postcode="110113" />
<area name="昌平区" postcode="110114" />
<area name="大兴区" postcode="110115" />
<area name="怀柔区" postcode="110116" />
<area name="平谷区" postcode="110117" />
</city>
<city name="县" postcode="110200" >
<area name="密云县" postcode="110228" />
<area name="延庆县" postcode="110229" />
</city>
</province>
</root>
（适用于任何常用浏览器）
<body>
<div>
<span>
<select id="sheng" style="width: 100px"></select>
</span>
<span>
<select id="shi" style="width: 100px"></select>
</span>
<span>
<select id="xian" style="width: 100px"></select>
</span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
function getXmlDoc(){
var xmlDoc;
try{
//给IE浏览器 创建一个空的微软 XML文档对象
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//在 Firefox及其他浏览器(opera)中的 XML解析器创建一个空的 XML文档对象。
xmlDoc=document.implementation.createDocument("","",null);
}catch(er){
alert("所使用的浏览器版本太低了,该换更新了");
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//解析器加载名为 "xxx.xml" 的 XML 文档
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload=function(){
var xmlDoc=getXmlDoc();
//获取xml文件的根节点
var root=xmlDoc.documentElement;
//获取xml文件的根节点下面的省节点
var provinces=root.childNodes;
//获取页面中要显示的省、市和县的控件dom对象
var sheng=document.getElementById("sheng");
var shi=document.getElementById("shi");
var xian=document.getElementById("xian");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性 问 题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(provinces[i].nodeType==1){
//创建一个option节点对象
var shengopt=document.createElement("option");
//为option省节点添加文本 shengopt.appendChild(document.createTextNode(provinces[i].getAttr ibute("name")));
//为option省节点设置属性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode "));
//添加省到页面dom对象中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时 触发事件
sheng.onchange=function(){
//获取省节点所有的option对象的集合
var shengs=sheng.options;
//获取选中option对象的selectedIndex(下标值)
var num=shengs.selectedIndex;
//清空市 区
shi.length=0;
xian.length=0;
//根据选中的省获取其value值的内容 即xml文件中的postcode对应的 值
var ppostcode=shengs[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点)
if(provinces[i].nodeType==1){
//根据省获取其postcode值的内容 即html文件中的value对应 的值
var postcode=provinces[i].getAttribute("postcode");
if(postcode==ppostcode){
//获取省节点的子节点
var cities=provinces[i].childNodes;
//清空
shi.length=0;
//遍历所有的市
for(var i=0;i<cities.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览 器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(cities[i].nodeType==1){
//创建一个option节点对象
var shiopt=document.createElement("option");
//为option市节点添加文本 shiopt.appendChild(document.createTextNode(cities[i].getAttribute ("name")));
//为option市节点设置属性
shiopt.setAttribute("value", cities[i].getAttribute("postcode"));
//添加市到页面dom对象中
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
//当市节点发生改变时 触发事件
shi.onchange=function(){
//获取市节点所有的option对象的集合
var shis=shi.options;
//获取选中option对象的selectedIndex(下标值)
var num=shis.selectedIndex;
//根据选中的市获取其value值的内容 即xml文件中的postcode对应的 值
var spostcode=shis[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点)
if(provinces[i].nodeType==1){
//获取省节点的子节点
var cities=provinces[i].childNodes;
//遍历所有的市
for(var j=0;j<cities.length;j++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之 间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(cities[j].nodeType==1){
//根据市获取其postcode值的内容 即html文件中的 value对应的值
var postcode=cities[j].getAttribute("postcode");
if(postcode==spostcode){
//清空
xian.length=0;
//获取市节点的子节点
var areas=cities[j].childNodes;
//遍历所有的区(县)
for(var k=0;k<areas.length;k++){
//查看该节点是否是元素节点 也是为了实现不 同浏览器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
if(areas[k].nodeType==1){
//创建一个option节点对象
var xianopt=document.createElement("option");
//为option区节点添加文本
xianopt.appendChild(document.createTextNode(areas[k].getAttribute ("name")));
//为option区节点设置属性
xianopt.setAttribute("value", areas[k].getAttribute("postcode"));
//添加区到页面dom对象中
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>
Xml文件（简写版）
<root name="中国">
<province name="请选择省" postcode="100000" >
<city name="请选择市" postcode="100100" >
<area name="请选择区" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市辖区" postcode="110100" >
<area name="东城区" postcode="110101" />
<area name="西城区" postcode="110102" />
<area name="崇文区" postcode="110103" />
<area name="宣武区" postcode="110104" />
<area name="朝阳区" postcode="110105" />
<area name="丰台区" postcode="110106" />
<area name="石景山区" postcode="110107" />
<area name="海淀区" postcode="110108" />
<area name="门头沟区" postcode="110109" />
<area name="房山区" postcode="110111" />
<area name="通州区" postcode="110112" />
<area name="顺义区" postcode="110113" />
<area name="昌平区" postcode="110114" />
<area name="大兴区" postcode="110115" />
<area name="怀柔区" postcode="110116" />
<area name="平谷区" postcode="110117" />
</city>
<city name="县" postcode="110200" >
<area name="密云县" postcode="110228" />
<area name="延庆县" postcode="110229" />
</city>
</province>
</root>
分享到：
发表评论
-
xdxxdxdxdxdxd
2014-09-30 19:35 0http://www.tudou.com/playlist/i ... -
aaaaaa
2013-06-16 23:04 0下载客户端 1. 检测客户端环境硬盘大小，2倍的下载包+1倍的 ... -
社保信息社保信息
2013-05-18 18:02 0社保信息社保信息社保信息社保信息社保信息 -
ps修改内容
2012-12-13 21:59 0ps要修改的内容。 1. Photoshop.CS6I.L ... -
php环境
2012-11-16 01:56 0php自己的心得 -
日文歌
2012-11-14 00:19 0日文歌 日文歌 日文歌 日文歌 腹式呼吸 http://v. ... -
黄伟文音乐展
2012-11-08 00:37 0黄伟文音乐展 -
黄伟文音乐展
2012-11-08 00:31 0黄伟文音乐展 -
eason新歌eason新歌
2012-09-27 00:37 0eason新歌eason新歌eason新歌eason新歌eas ... -
2012新歌
2012-09-27 00:09 0新歌20122012eason新歌eason新歌eason新歌 ... -
music
2012-09-04 02:24 0music wjwl.com -
考拉1
2012-08-01 01:17 0firefox 14.0.1 -
jquery学习资料
2012-02-21 21:22 0jquery学习资料
相关推荐
在网页开发中，"JS解析XML实现省市县三级联动"是一种常见的交互功能，主要用于地理信息的选择，例如用户在填写地址时选择省份、城市和区县。这个功能通过JavaScript（JS）解析XML数据来动态更新下拉菜单，实现联动...
在网页设计中，三级联动通常用于地区...总结，这个示例展示了如何利用Ajax和XML数据结构实现跨浏览器的省市县三级联动。它通过动态更新DOM元素实现了用户交互，并且具有良好的可扩展性，可以适应不同的地区选择需求。
综上所述，通过 jQuery 实现事件监听和 DOM 操作，使用 AJAX 进行异步数据请求，结合 XML 进行数据解析，我们可以高效地实现省市县三级联动的功能。这在现代 web 开发中是一个基础且实用的技能，能够提供流畅的用户...
在IT行业中，"js+xml省市县三级联动实现【完成重构】"是一个常见的前端开发任务，主要涉及JavaScript（js）和XML（eXtensible Markup Language）技术，用于创建具有交互性的省市县三级联动选择功能。这种功能常见于...
总的来说，实现"JQuery 解析XML省市区县三级联动"涉及的主要技术包括JQuery的事件处理、XML解析、AJAX通信、DOM操作等，这些是Web开发中的基础技能，对于提升用户交互体验至关重要。在实际开发中，开发者还需要考虑...
总结来说，这个成功的实例展示了如何用JavaScript解析XML数据，并结合DOM操作实现省市县三级联动的效果。在实际应用中，这种技术常用于动态生成下拉列表，提供用户友好的交互体验，特别是在需要根据上一级选择更新下...
本主题“基于xml数据的省市区三级联动”关注的是如何利用JavaScript和XML数据来实现这一功能。 XML（Extensible Markup Language）是一种用于存储和传输数据的格式，它结构清晰，易于解析，并且与平台和语言无关。...
这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信，以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说，这是一个很好的实践案例，有助于深入理解Web开发中的异步交互和...
本主题将探讨如何利用jQuery解析XML文件，进而实现省市县三级联动的下拉框效果，这是一种常见的地理数据展示方式，常用于地址选择或者物流配送等场景。 首先，XML（Extensible Markup Language）是一种用于存储和...
在本文中，将介绍如何使用JavaScript解析XML文件来实现省市县三级联动功能。这一过程涉及对XML文件的解析、DOM（文档对象模型）的操作以及如何在前端页面上通过下拉列表（select）组件展示数据，并且实现当选择不同...
纯JavaScript实现的省市县三级联动，主要利用DOM操作和数组数据结构来完成。首先，需要准备一个包含省市县数据的结构化数组，通常每个元素包含省、市、县三个层级的ID和名称。然后，当用户在某个下拉框（如省份）中...
在IT行业中，尤其是在Web开发领域，"Java+Ajax无刷新实现省市县三级联动"是一个常见的需求，主要用于提高用户体验，使得用户在选择地理位置时无需多次点击提交按钮，而是通过异步方式实时更新数据。这个实例是一个...
综上所述，"ajax asp.net 省市县三级联动"是通过Ajax技术和ASP.NET平台实现的一种用户界面交互功能，旨在提供流畅的地理位置选择体验。在实际项目中，还需要考虑错误处理、数据验证、性能优化等多方面因素，以确保...
在省市县三级联动的实现中，C#作为后台逻辑处理的主要工具，负责处理数据读取、验证、计算和响应等任务。 2. **XML文件配置**： XML（Extensible Markup Language）是一种用于存储和传输结构化数据的标记语言。在...
总的来说，XML省市县三级联动是通过XML文件存储地理区域数据，然后使用前端或后端技术解析这些数据，动态生成并更新用户界面中的选择框，以实现流畅的交互体验。这种技术在Web开发中有着广泛的应用。
在IT领域，特别是Web开发中，实现省、市、县三级联动是常见需求之一，尤其在用户选择地理位置信息时。本文将深入解析如何利用Ajax、jQuery以及JSON来实现这一功能，通过具体代码示例和实践心得，帮助读者理解并掌握...
在这个"省市区级三级联动Jquery_xml版本"中，开发者提供了一个基于jQuery的解决方案，结合XML数据源，实现了便捷的省级、市级和区县级的选择联动效果。 首先，jQuery是一个广泛使用的JavaScript库，它简化了HTML...
在网页开发中，"ajax xml省市区三级联动"是一个常见的功能需求，主要用于用户在选择省份时，自动更新下拉框中的城市选项，再选择城市时，又会动态加载出对应的区县选项。这个过程无需刷新整个页面，提升了用户体验。...
无刷新省市县三级联动是一种常见的前端交互设计，它在网页中实现了省份、城市、区县选择功能，用户在选择上一级地区时，下一级地区会自动更新，无需刷新整个页面，提高了用户体验。这一技术主要基于AJAX...
这个特定的项目，"纯JS写的省市县三级联动菜单"，是一个无需使用AJAX，而是直接连接数据库来实现的功能模块。下面我们将深入探讨这个话题。 首先，我们要理解什么是三级联动菜单。它通常包含三个级别的选项，如在这...