`
javawangli
  • 浏览: 224890 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

解决Js解析xml浏览器不兼容问题及省市区三级联动实现

浏览器XMLOperaFirefoxIE 
阅读更多

解决Js解析xml浏览器不兼容问题及省市区三级联动实现

 

   

   首先分析一下，浏览器不兼容的原因：

 

   不同的浏览器在加载xml是的方法不同

     //IE浏览器

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

     // firefox opera其他浏览器

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

    Firefox，opera以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。

 处理空白和换行的方式 ：

   for(var i=0;i<provinces.length;i++){ //在输出所有的子节点的时候

       if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点

          }

    }

  

  这样做就OK啦！

  要说明的是 opera11.01以下这样做都是兼容的；但是在opera 11.01是不兼容的  

   因为在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.

  

有两种解决方案

   1，就是在服务器页面中访问，开启服务器，进行访问，

   2，在opera11.01中设置User Prefs属性     

             1>、打开opera浏览器,在地址栏中输入:about:cofig   

             2>、在列举的首选项编辑器中找到: User Prefs   

             3>、点击打开User Prefs 找到里边的:Allow File XMLHttpRequest并勾选   

             4>、勾选上之后点击下面的保存按钮即可解决;  

 

   就以省市区三级联动为例，代码实现如下：

     创建一个city.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>
  <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>
   太多省略。。。
  可以在下面下载完整的city,xml
</root>

 

    在javascript中解析
  
     
	function getxmlDoc() {
		var xmlDoc;
		try { //IE浏览器
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		} catch (err) {
			try {	//firefox 等浏览器 
			xmlDoc = document.implementation.createDocument("", "", null);
			} catch (e) {
			alert("你的浏览器 版本太低了。。。");
			}
		}
		//关闭 异步加载  
		xmlDoc.async = false;
		//加载XML
		xmlDoc.load("city1.xml");
		return xmlDoc;
	}
	window.onload = function() {
        //获得dom中的对象 
		var sheng = document.getElementById("sheng");
		var shi = document.getElementById("shi");
		var xian = document.getElementById("xian");
         //定义函数对象
		var xmlDoc = getxmlDoc();
		//获得根节点 
		var root = xmlDoc.documentElement;
         //通过根节点 获取子节点的集合 
		var provinces = root.childNodes;
        //遍历 省份 
		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"));
                  //添加到div中 
			sheng.appendChild(shengopt);
			}
		}
		//点击省份 触发oncheange事件
		sheng.onchange = function() {
		    //获取省节点的option对象的集合 
			var shengs = sheng.options;
			//获取option对象的selectedIndex对象（下标值）			
			var num = shengs.selectedIndex;
			  //清除市 区；
			shi.length = 0;
			xian.length = 0;
			 // 根据获得的节点 获取其value值
			var ppostcode = shengs[num].getAttribute("value");
               //遍历省份
			for ( var i = 0; i < provinces.length; i++) {
                //判断该节点是不是元素节点 同时也为了实现不同浏览器的兼容性 
	if (provinces[i].nodeType == 1) {
		//通过节点获取postcode值
		var postcode = provinces[i].getAttribute("postcode");
                            //判断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) {
						//创建option对象
						var shiopt = document.createElement("option");
						//添加文本 
						shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
							//创建属性 及赋值 
						shiopt.setAttribute("value", cities[i].getAttribute("postcode"));
						//添加到div中
						shi.appendChild(shiopt);
							}
						}
						break;
					}

				}
			}

		}
         //点击市  触发oncange事件
		shi.onchange = function() {
		    //获得市option对象集合 
			var shis = shi.options;
			//通过option获得selesctedIndex对象 
			var nums = shis.selectedIndex;
			//通过节点获取value值 
			var spostcode = shis[nums].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>
     html中显示
   
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>cities.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>
 

   

  • city.rar (24.8 KB)
  • 描述: city.xml（完整版）
  • 下载次数: 34
1
顶
1
踩
分享到：
| js 解析xml文件实现省市级联下拉菜单
评论
发表评论

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

相关推荐

    全国省市区三级联动（带数据库）

    全国省市区三级联动是一种常见的前端交互功能，常用于地址选择、区域筛选等场景。这个压缩包文件提供的资源可能包括JavaScript代码、CSS样式表以及数据库数据，以实现动态加载和显示中国的省、市、区（县）信息。接...

    js省市区三级联动（兼容版本）

    在这个"兼容js省市区三级联动"的压缩包中，可能包含了一个已经处理好以上问题的JavaScript库或脚本，可以快速集成到项目中，避免自己从头实现。使用时，只需将数据导入，按照文档或示例代码配置，即可实现省市区三级...

    省市县XML三级联动

    在IT行业中，"省市县XML三级联动"是一个常见的前端开发功能，主要用于用户在网页或应用程序中选择地理位置时提供便捷的交互体验。这个功能通常应用于地址输入、物流配送、门店选址等场景，使得用户能逐级从省级、...

    jQuery省市区三级联动多选代码.zip

    这个"jQuery省市区三级联动多选代码.zip"压缩包文件提供了实现这一功能的jQuery代码示例。下面我们将深入探讨这个主题，解析其背后的原理和技术细节。 首先，三级联动指的是在一个表单或界面中，当用户选择一个层级...

    省市县三级联动asp.net+ajax

    在IT行业中，"省市县三级联动asp.net+ajax"是一个常见的功能需求，特别是在网页表单设计时，用于实现用户选择省、市、县（区）的交互过程。这个功能允许用户在选择省份后，市、县（区）的下拉菜单会自动更新，无需...

    Ajax三级联动 省市区

    在网页开发中，"Ajax三级联动 省市区" 是一种常见的交互设计，它利用Ajax技术实现省份、城市、区县三个级别的下拉菜单联动效果。这种设计在用户填写地址或者选择区域时提供了便捷的用户体验，用户只需选择一个级别，...

    省市县三级联动

    在IT行业中，"省市县三级联动"是一种常见的前端交互设计，尤其在选择地址或筛选信息时经常用到。它指的是用户在选择一个级别的选项后，下一级别的选项会自动更新，形成省-市-县（或者区）的连续选择过程。这种设计...

    ajax三级联动

    在网页开发中，"ajax三级联动"是一种常见的交互设计，主要应用于下拉菜单或选择框，如城市选择，其中包含省、市、区三个级别。这种功能能够为用户提供流畅的体验，无需每次选择都刷新整个页面，提高了网页的响应速度...

    jQuery+xml三级联动

    **jQuery与XML三级联动**是Web开发中一种常见的交互技术，主要用于实现无刷新情况下，如省市县/州的联动选择效果。在这个场景中，我们利用jQuery的事件处理和DOM操作功能，结合XML数据格式，来动态地更新下拉菜单...

    修正多个Bug优美的jquery+xml城市3级联动效果（放在IIS下）

    "修正多个Bug优美的jquery+xml城市3级联动效果（放在IIS下）"这个项目正聚焦于实现这样的功能，它是一个基于jQuery和XML的省市区三级联动选择器，优化了用户体验并解决了已知的问题。 jQuery是一个广泛使用的...

    ajax 省市区（县） 联动下拉

    **Ajax省市区（县）联动下拉技术详解** 在网页设计和开发中，为了提供用户友好的交互体验，经常会用到联动下拉框。这种功能主要用于实现地理信息的选择，例如选择省份后，市、区（县）的下拉框会自动更新为与之对应...

    jquery弹窗三级联动

    在IT行业中，"jQuery弹窗三级联动"是一个常见的前端交互技术，主要应用于网页表单、下拉菜单或者导航栏等，以实现用户友好的交互体验。这种技术利用jQuery库的高效性和灵活性，使得页面在无需刷新的情况下，通过联动...

Magicbox
Global site tag (gtag.js) - Google Analytics