z_xiaofei168
- 浏览: 200635 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
dingran：
我工作三年了，连多线程都没用过！楼主的精神应该支持，有错误要指 ...
抽象类与接口的区别 -
yindejie：
这个。。。。老实说。。。博主的语言表达能力有点差。。。语句不通 ...
抽象类与接口的区别 -
white_crucifix：
其实楼主这篇博客本质上没什么问题，就是生错了年代，呵呵，如果是 ...
抽象类与接口的区别 -
xiaoyu1985ban：
z_xiaofei168 写道skzr.org 写道说了很多， ...
抽象类与接口的区别 -
white_crucifix：
BabyDuncan 写道写的很垃圾,可以说是狗屁不通.什么叫 ...
抽象类与接口的区别
解析xml文件实现省市县三级联动
我是做Java程序开发的，js省市县三级级联。
首先说一下什么是js省市县三级级联？js省市县三级级联是指，当你选择一个省的时候，程序会默认的把该省的城市列入城市的下拉列表框中，同样的，当你选择一个城市的时候，程序会默认的把该城市的县列入县的下拉列表框中。
实现js省市三级联动需要两个文件。
一、xml文件；
二、html文件；
下面我简单的写了一个xml文件
<?xml version="1.0" encoding="UTF-8"?>
<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>
<province name="天津市" postcode="120000" >
<city name="市辖区" postcode="120100" >
<area name="和平区" postcode="120101" />
<area name="河东区" postcode="120102" />
<area name="河西区" postcode="120103" />
<area name="南开区" postcode="120104" />
<area name="河北区" postcode="120105" />
<area name="红桥区" postcode="120106" />
<area name="塘沽区" postcode="120107" />
<area name="汉沽区" postcode="120108" />
<area name="大港区" postcode="120109" />
<area name="东丽区" postcode="120110" />
<area name="西青区" postcode="120111" />
<area name="津南区" postcode="120112" />
<area name="北辰区" postcode="120113" />
<area name="武清区" postcode="120114" />
<area name="宝坻区" postcode="120115" />
</city>
<city name="县" postcode="120200" >
<area name="宁河县" postcode="120221" />
<area name="静海县" postcode="120223" />
<area name="蓟县" postcode="120225" />
</city>
</province>
<province name="河北省" postcode="130000" >
<city name="石家庄市" postcode="130100" >
<area name="长安区" postcode="130102" />
<area name="桥东区" postcode="130103" />
<area name="桥西区" postcode="130104" />
<area name="新华区" postcode="130105" />
<area name="井陉矿区" postcode="130107" />
<area name="裕华区" postcode="130108" />
<area name="井陉县" postcode="130121" />
<area name="正定县" postcode="130123" />
<area name="栾城县" postcode="130124" />
<area name="行唐县" postcode="130125" />
<area name="灵寿县" postcode="130126" />
<area name="高邑县" postcode="130127" />
<area name="深泽县" postcode="130128" />
<area name="赞皇县" postcode="130129" />
<area name="无极县" postcode="130130" />
<area name="平山县" postcode="130131" />
<area name="元氏县" postcode="130132" />
<area name="赵县" postcode="130133" />
<area name="辛集市" postcode="130181" />
<area name="藁城市" postcode="130182" />
<area name="晋州市" postcode="130183" />
<area name="新乐市" postcode="130184" />
<area name="鹿泉市" postcode="130185" />
</city>
<city name="唐山市" postcode="130200" >
<area name="路南区" postcode="130202" />
<area name="路北区" postcode="130203" />
<area name="古冶区" postcode="130204" />
<area name="开平区" postcode="130205" />
<area name="丰南区" postcode="130207" />
<area name="丰润区" postcode="130208" />
<area name="滦县" postcode="130223" />
<area name="滦南县" postcode="130224" />
<area name="乐亭县" postcode="130225" />
<area name="迁西县" postcode="130227" />
<area name="玉田县" postcode="130229" />
<area name="唐海县" postcode="130230" />
<area name="遵化市" postcode="130281" />
<area name="迁安市" postcode="130283" />
</city>
<city name="秦皇岛市" postcode="130300" >
<area name="海港区" postcode="130302" />
<area name="山海关区" postcode="130303" />
<area name="北戴河区" postcode="130304" />
<area name="青龙满族自治县" postcode="130321" />
<area name="昌黎县" postcode="130322" />
<area name="抚宁县" postcode="130323" />
<area name="卢龙县" postcode="130324" />
</city>
<city name="邯郸市" postcode="130400" >
<area name="邯山区" postcode="130402" />
<area name="丛台区" postcode="130403" />
<area name="复兴区" postcode="130404" />
<area name="峰峰矿区" postcode="130406" />
<area name="邯郸县" postcode="130421" />
<area name="临漳县" postcode="130423" />
<area name="成安县" postcode="130424" />
<area name="大名县" postcode="130425" />
<area name="涉县" postcode="130426" />
<area name="磁县" postcode="130427" />
<area name="肥乡县" postcode="130428" />
<area name="永年县" postcode="130429" />
<area name="邱县" postcode="130430" />
<area name="鸡泽县" postcode="130431" />
<area name="广平县" postcode="130432" />
<area name="馆陶县" postcode="130433" />
<area name="魏县" postcode="130434" />
<area name="曲周县" postcode="130435" />
<area name="武安市" postcode="130481" />
</city>
<city name="邢台市" postcode="130500" >
<area name="桥东区" postcode="130502" />
<area name="桥西区" postcode="130503" />
<area name="邢台县" postcode="130521" />
<area name="临城县" postcode="130522" />
<area name="内丘县" postcode="130523" />
<area name="柏乡县" postcode="130524" />
<area name="隆尧县" postcode="130525" />
<area name="任县" postcode="130526" />
<area name="南和县" postcode="130527" />
<area name="宁晋县" postcode="130528" />
<area name="巨鹿县" postcode="130529" />
<area name="新河县" postcode="130530" />
<area name="广宗县" postcode="130531" />
<area name="平乡县" postcode="130532" />
<area name="威县" postcode="130533" />
<area name="清河县" postcode="130534" />
<area name="临西县" postcode="130535" />
<area name="南宫市" postcode="130581" />
<area name="沙河市" postcode="130582" />
</city>
<city name="保定市" postcode="130600" >
<area name="新市区" postcode="130602" />
<area name="北市区" postcode="130603" />
<area name="南市区" postcode="130604" />
<area name="满城县" postcode="130621" />
<area name="清苑县" postcode="130622" />
<area name="涞水县" postcode="130623" />
<area name="阜平县" postcode="130624" />
<area name="徐水县" postcode="130625" />
<area name="定兴县" postcode="130626" />
<area name="唐县" postcode="130627" />
<area name="高阳县" postcode="130628" />
<area name="容城县" postcode="130629" />
<area name="涞源县" postcode="130630" />
<area name="望都县" postcode="130631" />
<area name="安新县" postcode="130632" />
<area name="易县" postcode="130633" />
<area name="曲阳县" postcode="130634" />
<area name="蠡县" postcode="130635" />
<area name="顺平县" postcode="130636" />
<area name="博野县" postcode="130637" />
<area name="雄县" postcode="130638" />
<area name="涿州市" postcode="130681" />
<area name="定州市" postcode="130682" />
<area name="安国市" postcode="130683" />
<area name="高碑店市" postcode="130684" />
</city>
<city name="张家口市" postcode="130700" >
<area name="桥东区" postcode="130702" />
<area name="桥西区" postcode="130703" />
<area name="宣化区" postcode="130705" />
<area name="下花园区" postcode="130706" />
<area name="宣化县" postcode="130721" />
<area name="张北县" postcode="130722" />
<area name="康保县" postcode="130723" />
<area name="沽源县" postcode="130724" />
<area name="尚义县" postcode="130725" />
<area name="蔚县" postcode="130726" />
<area name="阳原县" postcode="130727" />
<area name="怀安县" postcode="130728" />
<area name="万全县" postcode="130729" />
<area name="怀来县" postcode="130730" />
<area name="涿鹿县" postcode="130731" />
<area name="赤城县" postcode="130732" />
<area name="崇礼县" postcode="130733" />
</city>
<city name="承德市" postcode="130800" >
<area name="双桥区" postcode="130802" />
<area name="双滦区" postcode="130803" />
<area name="鹰手营子矿区" postcode="130804" />
<area name="承德县" postcode="130821" />
<area name="兴隆县" postcode="130822" />
<area name="平泉县" postcode="130823" />
<area name="滦平县" postcode="130824" />
<area name="隆化县" postcode="130825" />
<area name="丰宁满族自治县" postcode="130826" />
<area name="宽城满族自治县" postcode="130827" />
<area name="围场满族蒙古族自治县" postcode="130828" />
</city>
<city name="沧州市" postcode="130900" >
<area name="新华区" postcode="130902" />
<area name="运河区" postcode="130903" />
<area name="沧县" postcode="130921" />
<area name="青县" postcode="130922" />
<area name="东光县" postcode="130923" />
<area name="海兴县" postcode="130924" />
<area name="盐山县" postcode="130925" />
<area name="肃宁县" postcode="130926" />
<area name="南皮县" postcode="130927" />
<area name="吴桥县" postcode="130928" />
<area name="献县" postcode="130929" />
<area name="孟村回族自治县" postcode="130930" />
<area name="泊头市" postcode="130981" />
<area name="任丘市" postcode="130982" />
<area name="黄骅市" postcode="130983" />
<area name="河间市" postcode="130984" />
</city>
<city name="廊坊市" postcode="131000" >
<area name="安次区" postcode="131002" />
<area name="广阳区" postcode="131003" />
<area name="固安县" postcode="131022" />
<area name="永清县" postcode="131023" />
<area name="香河县" postcode="131024" />
<area name="大城县" postcode="131025" />
<area name="文安县" postcode="131026" />
<area name="大厂回族自治县" postcode="131028" />
<area name="霸州市" postcode="131081" />
<area name="三河市" postcode="131082" />
</city>
<city name="衡水市" postcode="131100" >
<area name="桃城区" postcode="131102" />
<area name="枣强县" postcode="131121" />
<area name="武邑县" postcode="131122" />
<area name="武强县" postcode="131123" />
<area name="饶阳县" postcode="131124" />
<area name="安平县" postcode="131125" />
<area name="故城县" postcode="131126" />
<area name="景县" postcode="131127" />
<area name="阜城县" postcode="131128" />
<area name="冀州市" postcode="131181" />
<area name="深州市" postcode="131182" />
</city>
</province>
</root>
在这就列出北京、天津、河北的部分城市。其他省市大家可以自行完善。
接下来就是html文件：
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>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"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <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">
<!--
//获取xmlDoc对象
function getXmlDoc(){
var xmlDoc;
try{
//IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//firefox 其他浏览器
xmlDoc = document.implementation.createDocument("","",null);
}catch(er){
alert("您的浏览器实在是太低........");
}
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//转载xml文件
xmlDoc.load("city.xml");
return xmlDoc;
}
/*
备注说明：不能把 getXmlDoc()方法中的代码放入到window.onload事件函数中
因为在opera11.01版本中会出现xmlDoc.async<window.onload的异常信息
XMLHttpRequest to files is disabled for security reasons.
==> Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
//为了支持opera11.01必须在服务器页面中访问.
*/
window.onload = function (){
//通过方法获取对象
var xmlDoc = getXmlDoc();
//获取xml文件的根节点
var root = xmlDoc.documentElement;
//获得所有的省节点
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++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType ==1 ){
//创建option节点对象
var shengopt = document.createElement("option");
//为省节点添加文本节点
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//为省节点添加属性
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++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType ==1 ){
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++){
if(cities[i].nodeType ==1){
var shiopt = document.createElement("option");
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange = function(){
var shis = shi.options;
var num = shis.selectedIndex;
var spostcode = shis[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
if(provinces[i].nodeType==1){
var cities = provinces[i].childNodes;
for(var j=0;j<cities.length;j++){
if(cities[j].nodeType==1){
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++){
if(areas[k].nodeType == 1){
var xianopt = document.createElement("option");
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>
1
顶
顶
0
踩
踩
分享到：
发表评论
相关推荐
本主题将探讨如何利用jQuery解析XML文件，进而实现省市县三级联动的下拉框效果，这是一种常见的地理数据展示方式，常用于地址选择或者物流配送等场景。 首先，XML（Extensible Markup Language）是一种用于存储和...
本主题“基于xml数据的省市区三级联动”关注的是如何利用JavaScript和XML数据来实现这一功能。 XML（Extensible Markup Language）是一种用于存储和传输数据的格式，它结构清晰，易于解析，并且与平台和语言无关。...
在网页开发中，"JS解析XML实现省市县三级联动"是一种常见的交互功能，主要用于地理信息的选择，例如用户在填写地址时选择省份、城市和区县。这个功能通过JavaScript（JS）解析XML数据来动态更新下拉菜单，实现联动...
在本案例中，Ajax用于动态加载和解析XML文件，从而实现省市县的联动选择。 首先，我们需要一个XML文件，如`city.xml`，其中包含省、市、县的结构数据。例如： ```xml 省份A" postcode="10000"> 城市A1" ...
综上所述，通过 jQuery 实现事件监听和 DOM 操作，使用 AJAX 进行异步数据请求，结合 XML 进行数据解析，我们可以高效地实现省市县三级联动的功能。这在现代 web 开发中是一个基础且实用的技能，能够提供流畅的用户...
在IT行业中，"js+xml省市县三级联动实现【完成重构】"是一个常见的前端开发任务，主要涉及JavaScript（js）和XML（eXtensible Markup Language）技术，用于创建具有交互性的省市县三级联动选择功能。这种功能常见于...
对于省市县三级联动，我们可以创建三个XML文件，分别存储省、市、县的数据。 1. **创建XML数据文件** - 创建一个如`provinces.xml`的文件，用于存放所有省份的数据，每个省份作为一个元素，属性包括省份ID和名称。...
总结来说，这个成功的实例展示了如何用JavaScript解析XML数据，并结合DOM操作实现省市县三级联动的效果。在实际应用中，这种技术常用于动态生成下拉列表，提供用户友好的交互体验，特别是在需要根据上一级选择更新下...
这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信，以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说，这是一个很好的实践案例，有助于深入理解Web开发中的异步交互和...
在ASP.NET开发中，我们经常需要处理用户界面中的选择交互，比如实现省市区三级联动的效果。这通常用于地址填写或配送区域的选择等场景。本文将详细介绍如何利用DropDownList控件结合XML数据源来实现这一功能。 首先...
总的来说，实现"JQuery 解析XML省市区县三级联动"涉及的主要技术包括JQuery的事件处理、XML解析、AJAX通信、DOM操作等，这些是Web开发中的基础技能，对于提升用户交互体验至关重要。在实际开发中，开发者还需要考虑...
2.js解析xml实现省 市 县三级联动。 3.通过百度地图，点击省 市 县 带出相应地图。 4.实现定位当前城市。 5.实现查询带出地图 6.百度地图密钥，需要自己注册，非商用，如若商用，责任自负。
在"省市县三级联动"的场景中，XML文件通常会包含中国各个省份、城市及县区的ID和名称，形成一个层次结构。例如： ```xml <id>1 北京市 <id>101 东城区 <id>10101 建国门街道 <!-- ...其他区县... -->...
"Xml+JS省市县三级联动(兼容IE FF)"就是一个这样的解决方案，它利用JavaScript（JS）语言处理XML文件，实现了在不同浏览器（如Internet Explorer和Firefox）中都可正常运行的联动效果。 XML（Extensible Markup ...
在省市县三级联动的实现中，C#作为后台逻辑处理的主要工具，负责处理数据读取、验证、计算和响应等任务。 2. **XML文件配置**： XML（Extensible Markup Language）是一种用于存储和传输结构化数据的标记语言。在...
1. JavaScript代码文件，用于实现纯JavaScript的省市县三级联动。 2. XML文件，存储省市县的层级数据。 3. 可能还会有HTML示例文件，展示如何在网页中应用这些实现。 4. 如果是基于数据库的实现，可能包含SQL脚本和...
在IT行业中，尤其是在Web开发领域，"Java+Ajax无刷新实现省市县三级联动"是一个常见的需求，主要用于提高用户体验，使得用户在选择地理位置时无需多次点击提交按钮，而是通过异步方式实时更新数据。这个实例是一个...
综上所述，"ajax asp.net 省市县三级联动"是通过Ajax技术和ASP.NET平台实现的一种用户界面交互功能，旨在提供流畅的地理位置选择体验。在实际项目中，还需要考虑错误处理、数据验证、性能优化等多方面因素，以确保...
本文将深入探讨如何使用JavaScript操作XML来实现省市县三级联动的效果，这是一种提高用户界面交互性的实用方法。 首先，理解XML（Extensible Markup Language）的基本概念至关重要。XML是一种用于标记数据的语言，...