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

承——级联实现

阅读更多

//承接xml浏览器兼容问题解决的具体实现方法 因xml 代码过多故贴出部分(省市区三级联动)

<body>
		<div>

			<span> <select id="sheng" style="width:100px;">
					<option>
						请选择省
					</option>
				</select> </span>

			<span><select id="shi" style="width:100px;">
					<option>
						请选择市
					</option>
				</select> </span>
			<span><select id="xian" style="width:100px;">
					<option>
						请选择市
					</option>
				</select> </span>

		</div>
	</body>

//脚本
   <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("city1.xml");
  return xmlDoc;
}
 window.onload=function(){
     var xmlDoc=getXmlDoc();
     //获取根节点 
     var root=xmlDoc.documentElement;
     //获取所有的省节点
     var provinces=root.childNodes;
     //获取页面的span下拉列表的对象
     var sheng=document.getElementById("sheng");
     var shi=document.getElementById("shi");
     var xian=document.getElementById("xian");
     //alert("省节点循环进入");
     //加载所有的省节点
    for(var i=0;i<provinces.length;i++){//alert("省节点循环进入");
    	 //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
      if(provinces[i].nodeType ==1 ){//alert("判断是否过滤了文本");
        	 //创建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(){
        //获取该省节点所有对象的集合 
        var shengs=sheng.options;
        var num=shengs.selectedIndex;
            //清空select列表
        shi.length=1;
        xian.length=1;
        //获取省份所对应的value值,根据值剧的到xml中相应节点
        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=1;
            
            for(var j=0;j<cities.length;j++){
              if(cities[j].nodeType==1){
                var shiopt = document.createElement("option");
	    	    shiopt.appendChild(document.createTextNode(cities[j].getAttribute("name")));
	            shiopt.setAttribute("value",cities[j].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=1;
    			   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>
//xml

<?xml version="1.0" encoding="UTF-8"?>
<root name="中国">

  <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="650000" >
    <city name="乌鲁木齐市" postcode="650100" >
        <area name="天山区" postcode="650102" />
        <area name="沙依巴克区" postcode="650103" />
        <area name="新市区" postcode="650104" />
        <area name="水磨沟区" postcode="650105" />
        <area name="头屯河区" postcode="650106" />
        <area name="达坂城区" postcode="650107" />
        <area name="东山区" postcode="650108" />
        <area name="乌鲁木齐县" postcode="650121" />
    </city>
    <city name="克拉玛依市" postcode="650200" >
        <area name="独山子区" postcode="650202" />
        <area name="克拉玛依区" postcode="650203" />
        <area name="白碱滩区" postcode="650204" />
        <area name="乌尔禾区" postcode="650205" />
    </city>
    <city name="吐鲁番地区" postcode="652100" >
        <area name="吐鲁番市" postcode="652101" />
        <area name="鄯善县" postcode="652122" />
        <area name="托克逊县" postcode="652123" />
    </city>
    <city name="哈密地区" postcode="652200" >
        <area name="哈密市" postcode="652201" />
        <area name="巴里坤哈萨克自治县" postcode="652222" />
        <area name="伊吾县" postcode="652223" />
    </city>
    <city name="昌吉回族自治州" postcode="652300" >
        <area name="昌吉市" postcode="652301" />
        <area name="阜康市" postcode="652302" />
        <area name="米泉市" postcode="652303" />
        <area name="呼图壁县" postcode="652323" />
        <area name="玛纳斯县" postcode="652324" />
        <area name="奇台县" postcode="652325" />
        <area name="吉木萨尔县" postcode="652327" />
        <area name="木垒哈萨克自治县" postcode="652328" />
    </city>
    <city name="博尔塔拉蒙古自治州" postcode="652700" >
        <area name="博乐市" postcode="652701" />
        <area name="精河县" postcode="652722" />
        <area name="温泉县" postcode="652723" />
    </city>
    <city name="巴音郭楞蒙古自治州" postcode="652800" >
        <area name="库尔勒市" postcode="652801" />
        <area name="轮台县" postcode="652822" />
        <area name="尉犁县" postcode="652823" />
        <area name="若羌县" postcode="652824" />
        <area name="且末县" postcode="652825" />
        <area name="焉耆回族自治县" postcode="652826" />
        <area name="和静县" postcode="652827" />
        <area name="和硕县" postcode="652828" />
        <area name="博湖县" postcode="652829" />
    </city>
    <city name="阿克苏地区" postcode="652900" >
        <area name="阿克苏市" postcode="652901" />
        <area name="温宿县" postcode="652922" />
        <area name="库车县" postcode="652923" />
        <area name="沙雅县" postcode="652924" />
        <area name="新和县" postcode="652925" />
        <area name="拜城县" postcode="652926" />
        <area name="乌什县" postcode="652927" />
        <area name="阿瓦提县" postcode="652928" />
        <area name="柯坪县" postcode="652929" />
    </city>
    <city name="克孜勒苏柯尔克孜自治州" postcode="653000" >
        <area name="阿图什市" postcode="653001" />
        <area name="阿克陶县" postcode="653022" />
        <area name="阿合奇县" postcode="653023" />
        <area name="乌恰县" postcode="653024" />
    </city>
    <city name="喀什地区" postcode="653100" >
        <area name="喀什市" postcode="653101" />
        <area name="疏附县" postcode="653121" />
        <area name="疏勒县" postcode="653122" />
        <area name="英吉沙县" postcode="653123" />
        <area name="泽普县" postcode="653124" />
        <area name="莎车县" postcode="653125" />
        <area name="叶城县" postcode="653126" />
        <area name="麦盖提县" postcode="653127" />
        <area name="岳普湖县" postcode="653128" />
        <area name="伽师县" postcode="653129" />
        <area name="巴楚县" postcode="653130" />
        <area name="塔什库尔干塔吉克自治县" postcode="653131" />
    </city>
    <city name="和田地区" postcode="653200" >
        <area name="和田市" postcode="653201" />
        <area name="和田县" postcode="653221" />
        <area name="墨玉县" postcode="653222" />
        <area name="皮山县" postcode="653223" />
        <area name="洛浦县" postcode="653224" />
        <area name="策勒县" postcode="653225" />
        <area name="于田县" postcode="653226" />
        <area name="民丰县" postcode="653227" />
    </city>
    <city name="伊犁哈萨克自治州" postcode="654000" >
        <area name="伊宁市" postcode="654002" />
        <area name="奎屯市" postcode="654003" />
        <area name="伊宁县" postcode="654021" />
        <area name="察布查尔锡伯自治县" postcode="654022" />
        <area name="霍城县" postcode="654023" />
        <area name="巩留县" postcode="654024" />
        <area name="新源县" postcode="654025" />
        <area name="昭苏县" postcode="654026" />
        <area name="特克斯县" postcode="654027" />
        <area name="尼勒克县" postcode="654028" />
    </city>
    <city name="塔城地区" postcode="654200" >
        <area name="塔城市" postcode="654201" />
        <area name="乌苏市" postcode="654202" />
        <area name="额敏县" postcode="654221" />
        <area name="沙湾县" postcode="654223" />
        <area name="托里县" postcode="654224" />
        <area name="裕民县" postcode="654225" />
        <area name="和布克赛尔蒙古自治县" postcode="654226" />
    </city>
    <city name="阿勒泰地区" postcode="654300" >
        <area name="阿勒泰市" postcode="654301" />
        <area name="布尔津县" postcode="654321" />
        <area name="富蕴县" postcode="654322" />
        <area name="福海县" postcode="654323" />
        <area name="哈巴河县" postcode="654324" />
        <area name="青河县" postcode="654325" />
        <area name="吉木乃县" postcode="654326" />
    </city>
    <city name="省直辖行政单位" postcode="659000" >
        <area name="石河子市" postcode="659001" />
        <area name="阿拉尔市" postcode="659002" />
        <area name="图木舒克市" postcode="659003" />
        <area name="五家渠市" postcode="659004" />
    </city>
  </province>
</root>

 

<!--EndFragment-->
2
1
分享到:
评论

相关推荐

    安卓Andriod源码——级联菜单,两级菜单自定义实现提供多种方式PopWindow,Fragment引用.zip

    这个压缩包“安卓Andriod源码——级联菜单,两级菜单自定义实现提供多种方式PopWindow,Fragment引用.zip”提供了实现这一功能的具体源代码,适用于Android应用程序。 首先,让我们了解级联菜单的基本概念。级联...

    安卓Android源码——级联菜单,两级菜单自定义实现提供多种方式PopWindow,Fragment引用.zip

    本文将深入探讨如何在Android平台上自定义实现这种级联菜单,主要关注使用PopWindow和Fragment进行引用的方式。 首先,让我们了解PopWindow。PopWindow是Android中的一个类,它允许开发者在屏幕上的任意位置显示一...

    安卓Android源码——级联菜单,两级菜单自定义实现提供多种方式PopWindow,Fragment引用.rar

    本示例源码主要探讨了如何在Android平台上实现一个级联菜单(Cascading Menu),它是一种常见的交互设计,通常用于显示多层级的选项。级联菜单通常由两层或更多层的菜单构成,用户在选择上一层菜单项后,下一层菜单...

    安卓Android源码——级联菜单,两级菜单自定义实现提供多种方式PopWindow,Fragment引用..zip

    在安卓中,我们可以通过组合ListView、Spinner等控件来实现级联菜单。在这个源码中,开发者可能使用了自定义Adapter和布局管理器来构建这种多级联动的效果,使菜单项能够根据用户的操作动态加载和展示子菜单。 ...

    Ajax征服——无限级级联菜单

    在本教程中,我们将深入探讨如何使用Ajax技术实现无限级级联菜单,提升用户体验。 Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。这使得网页...

    光纤传输系统中互相位调制和受激拉曼散射串扰噪声的比较研究Ⅱ————级联传输系统

    在具有级联光放大器的密集波分复用...在带色散补偿的密集波分复用级联光纤传输系统中(如80信道,信道间距50 GHz),受激拉曼散射引入的串扰噪声功率可能超过互相位调制.最后,给出了密集波分复用系统分析与设计的若干建议.

    jsp实现级联菜单 jsp实现级联菜单

    ### JSP实现级联菜单详解 #### 一、概述 级联菜单是Web应用程序中常见的一种交互设计方式,尤其在需要展示多层级数据结构时,如省份-城市选择器等场景下非常实用。通过级联菜单,用户可以方便地根据上一级的选择来...

    Execl级联实现 JAVA实现 可以直接运行

    "Execl级联实现 JAVA实现 可以直接运行"的标题表明,这是一个可以直接在IDEA(IntelliJ IDEA)集成开发环境中运行的Maven项目,这意味着开发者可以方便地利用Maven的依赖管理和构建功能来简化开发流程。 首先,我们...

    STM32 定时器级联

    在STM32系列芯片中,定时器可以被配置为级联模式,以实现更复杂的定时或计数任务,比如产生精确的PWM输出、高分辨率的计数等。下面我们将深入探讨这一主题。 首先,我们要理解STM32定时器的基本概念。STM32提供了...

    级联菜单的实现

    在计算机软件中,级联菜单的实现是一个关键的交互设计环节,它能提升用户体验,使得复杂的操作更加直观。本篇文章将深入探讨如何在不同编程环境中实现级联菜单,并通过一个实际的例子来演示其工作原理。 首先,我们...

    交换机的基本配置,交换机级联实现PC之间的互通[借鉴].pdf

    交换机的基本配置和交换机级联实现PC之间的互通 交换机的基本配置是网络管理员的基础知识,它包括交换机的各种模式、配置命令、接口配置、线路模式等。交换机的级联实现PC之间的互通,则是网络架构中的一种重要应用...

    jQuery实现级联地区选择

    "jQuery实现级联地区选择"这个主题就是关于如何利用jQuery库来创建一个动态联动的省份-城市选择器。这个实例包含了JSP(JavaServer Pages)、JavaScript和CSS三个主要部分,旨在提供一种高效、用户友好的选择体验。 ...

    级联 ajax实现方式

    在Web开发中,级联(Cascading)Ajax是一种常见的技术,用于实现多级下拉菜单或者联动选择的效果。这种技术通常用在需要用户按顺序选择一系列相关选项的场景,如地区选择,先选国家,再选省份,最后选城市。这种级联...

    Ajax 实现级联菜单

    在本项目中,Ajax被用来实现级联菜单的效果,即一个下拉菜单的选择会影响另一个下拉菜单的内容,这种交互方式常见于数据层级关系丰富的表单中。下面将详细介绍Ajax实现级联菜单的相关知识点。 1. **异步通信**: ...

    .net下拉菜单的级联实现源码

    下面将详细介绍如何在.NET环境下实现级联下拉菜单的源码。 首先,我们需要了解级联下拉菜单的基本工作原理。通常,级联下拉菜单由两个或更多个ASP.NET的`&lt;asp:DropDownList&gt;`控件组成。第一个下拉菜单的选择触发一...

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    EXTJS的ComboBox级联实现是Web应用程序中常见的一种交互方式,尤其在数据表单中用于联动选择。在本文中,我们将深入探讨EXTJS如何实现ComboBox的级联效果,并理解其数据提交VALUE的工作原理。 首先,我们需要创建两...

    Wpf ComboBox 多级正反向级联的实现示例

    Wpf ComboBox 多级正向级联比较容易实现,想实现反向级联还是有一定难度。添加新对象只用到正向级联,而浏览不同的对象就需要用到反向级联。本示例程序为一个简约到极致的企业管理系统,使用EF Code First,Sql ...

    RS(255,239)和(2,1,7)卷积码的级联实现代码

    本项目关注的是RS(255,239)和(2,1,7)卷积码的级联实现,这是一种组合两种不同纠错编码方式来增强错误检测和纠正能力的方法。 首先,RS(255,239)码,也称为Reed-Solomon码,是一种非线性分组码。它基于伽罗...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    cas.rar_MATLAB 级联失效_级联_级联失效 代码_级联失效代码_级联失效算法

    "MATLAB 级联失效"指的是使用MATLAB来实现级联失效的模型和算法。"级联_级联失效 代码"则表明这个压缩包包含了级联失效的程序代码,这些代码可能是由MATLAB编写,用于仿真和分析网络中的级联失效现象。 "级联失效...

Global site tag (gtag.js) - Google Analytics