码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 实现 对XML文件 2级/3级联动操作

时间:2015-11-18 23:03:44      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:

js代码

//实现对xml文档的读取:
function
loadXMLDoc(dname) { try // Internet Explorer { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try // Firefox, Mozilla, Opera, etc. { xmlDoc = document.implementation.createDocument("", "", null); } catch (e) { alert(e.message) } } try { xmlDoc.async = false; xmlDoc.load(dname);//加载xml文档 return (xmlDoc); } catch (e) { alert(e.message) } return (null); }
//实现对xml文档的操作:  
var stateSelectObj = document.getElementById("state"); var citySelectObj = document.getElementById("city"); var regionSelectObj = document.getElementById("region"); //初始化一个请选择:html dom stateSelectObj.add(new Option("--请选择--","")); citySelectObj.add(new Option("--请选择--","")); regionSelectObj.add(new Option("--请选择--","")); //从XML中读取所有的省份,给stateSelect赋值 var xmlDoc = loadXMLDoc("LocList.xml");//获取到代表XML文件的那个Document对象 var xmlStateNodes = xmlDoc.getElementsByTagName("State"); for(var i=0;i<xmlStateNodes.length;i++){ var xmlStateName = xmlStateNodes[i].getAttribute("Name"); var xmlStateCode = xmlStateNodes[i].getAttribute("Code"); stateSelectObj.add(new Option(xmlStateName,xmlStateCode)); } //给省份select注册onchange事件 stateSelectObj.onchange=function(){ //清空 citySelectObj.length=0; citySelectObj.add(new Option("--请选择--","")); if(this.value!=""){ for(var i=0;i<xmlStateNodes.length;i++){ //在xml中查找所有的State标签,看谁的Code属性和value值一样 var xmlStateCode = xmlStateNodes[i].getAttribute("Code"); if(this.value==xmlStateCode){ //调用该标签的getElementsByTagName,找到子标签。 var xmlCityNodes = xmlStateNodes[i].getElementsByTagName("City"); for(var j=0;j<xmlCityNodes.length;j++){ var xmlCityName = xmlCityNodes[j].getAttribute("Name"); var xmlCityCode = xmlCityNodes[j].getAttribute("Code"); //添加城市html citySelectObj.add(new Option(xmlCityName,xmlCityCode)); } break; } } } } //给市级城市添加onchange事件 citySelectObj.onchange=function() { //清空 regionSelectObj.length=0; regionSelectObj.add(new Option("--请选择--","")); if(this.value!="") { for(var i=0;i<xmlStateNodes.length;i++) { var xmlStateCode = xmlStateNodes[i].getAttribute("Code"); if(stateSelectObj.value==xmlStateCode) { var xmlCityNodes = xmlStateNodes[i].getElementsByTagName("City"); for(var j=0;j<xmlCityNodes.length;j++) { if(this.value==xmlCityNodes[j].getAttribute("Code")) { var xmlregionNodes = xmlCityNodes[j].getElementsByTagName("Region"); for(var k=0;k<xmlregionNodes.length;k++) { var xmlregionName = xmlregionNodes[k].getAttribute("Name"); var xmlregionCode = xmlregionNodes[k].getAttribute("Code"); //添加城市html regionSelectObj.add(new Option(xmlregionName,xmlregionCode)); } } } } } } }

 

 html:

<body>
    js三级联动实现地址选取:
	<select id="state" name="state"></select>
	<select id="city" name="city"></select>
	<select id="region" name="region"></select>
  </body>

xml文档内容:

xml文档

实现:

实现页面

 

javascript 实现 对XML文件 2级/3级联动操作

标签:

原文地址:http://www.cnblogs.com/FLFL/p/4976117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!