`
周一Monday
  • 浏览: 346832 次
  • 来自: 北京
社区版块
存档分类
最新评论

javascript与xml实现二级联动

阅读更多



 

 

1.city.xml

<?xml version="1.0" encoding="GB2312"?>
<china>
	<province name="吉林省">
		<city>长春</city>
		<city>四平</city>
		<city>通化</city>
	</province>
	<province name="辽宁省">
		<city>沈阳</city>
		<city>大连</city>
		<city>鞍山</city>
	</province>
	<province name="山东省">
		<city>济南</city>
		<city>青岛</city>
		<city>威海</city>
	</province>
</china>	

 

2.city.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
	   <option value="吉林省">吉林省</option>
	   <option value="辽宁省">辽宁省</option>
	   <option value="山东省">山东省</option>
     </select>
	 <select id="city" name="city">
	 	<option value="">请选择.....</option>
	 </select>
  </body>
  
    <script type="text/javascript">
     window.onload=function(){
	      document.getElementById("province").onchange=function(){
		  	
			  //取得省值
		  	  var selectProvince=this.value;
			  
			  //获取城市节点
			  var cityElement=document.getElementById("city");

			 //删除的时候从后往前删
			  var cityOptionElements=cityElement.getElementsByTagName("option");
			  for(var i=cityOptionElements.length-1;i>0;i--){
			  	  cityElement.removeChild(cityOptionElements[i]);
			  }
			  
			  //解析xml文件
			  var xmlDoc=parseXML("city.xml");
			  
			  //声明省的节点
			   var provinceElement=null;
	
			  //解析XML节点
			  var provinceXmlElements=xmlDoc.getElementsByTagName("province");
			  for(var i=0;i<provinceXmlElements.length;i++){
			     var provinceXmlElement=provinceXmlElements[i];
				 var xmlNameValue=provinceXmlElement.getAttribute("name");
				 if(selectProvince==xmlNameValue){
					provinceElement=provinceXmlElement;
					break;
				 }
			  }
			  
			 //在城市下增加option元素
			  if(provinceElement!=null){
                  var cityXmlElements=provinceElement.getElementsByTagName("city");	
				  for(var i=0;i<cityXmlElements.length;i++){
				  	 var cityXmlElement=cityXmlElements[i];
					 var cityxmlValue=cityXmlElement.firstChild.nodeValue;
					 var optionElement=document.createElement("option");
					 optionElement.setAttribute("value",cityxmlValue);
					 var textElement=document.createTextNode(cityxmlValue);
					 optionElement.appendChild(textElement);
					 cityElement.appendChild(optionElement);
				  }	
			  }
		  }  	
	 }	
	 
	 //解析xml文件
	 function parseXML(filename){
	     var xmlDoc;
	     try{
		 	  //Internet Explorer
		 	 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		 }
	      catch(e){
	           try{
	  				//Firefox, Mozilla, Opera, etc.
		   			 xmlDoc=document.implementation.createDocument("","",null);
			   }
	          catch(e){}
	       }
		 
		 //关闭异步加载
	     xmlDoc.async=false;
	     xmlDoc.load(filename);
         return  xmlDoc; 
	 }
  </script>


</html>

 

实现三级联动:  http://1194867672-qq-com.iteye.com/blog/1154154

  • 大小: 5.9 KB
分享到:
评论

相关推荐

    (175797816)华南理工大学信号与系统Signal and Systems期末考试试卷及答案

    内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    深圳建设施工项目安全生产奖惩管理制度.docx

    深圳建设施工项目安全生产奖惩管理制度

    离散数学课后题答案+sdut往年试卷+复习提纲资料

    离散数学课后题答案+sdut往年试卷+复习提纲资料

    自考04741计算机网络原理真题及答案及课件

    04741计算机网络原理 2018(尚德).pdf 13年试题(2套).pdf 2015年10月自考计算机网络原理04741试题及答案解析.docx 2021年4月自考04741计算机网络原理真题及答案.docx 2021年4月自考04741计算机网络原理试卷.bak.docx 计算机网络原理 课后题答案 全 李全龙版 自考04741.zip.zip 计算机网络原理课件 计算机网络原理课件.rar

    C++实现rpc,全程手写

    C++实现rpc,全程手写

    前端拿到的列表数据里id都一样的处理办法.txt

    前端拿到的列表数据里id都一样的处理办法.txt

    最新仿720云全景制作源码-krpano仿720云全景网站源码 新增微信支付+打赏+场景红包

    最新仿720云全景制作源码|krpano仿720云全景网站源码(新增微信支付+打赏+场景红包等)是一款基于php+mysql开发制作的全景在线制作网站源码,包含全景图片,全景视频等。数据存储全部存于OSS云端或本地,源码完全开源可自行二次开发。 环境要求:PHP5.5.X+MYSQL5.6.X+伪静态 熟悉linux系统推荐使用LAMP,web服务器最好使用apache,不要使用nginx(发布大全景图需要时间可能需要20多分钟, nginx超时机制不好控制)。 Windows系统推荐使用phpstudy。Liunx推荐宝塔控制面板apache 前端为HTML5开发,自适应手机版! 1、支持VR虚拟现实、全景视频、环物全景、说一说、点赞评论、重力感应、智能视频嵌入、场景切换热点、加载进度条、 地图导航、光晕flash特效、物体全景嵌入、场景自播、场景解说、雷达导航等业内前沿功能。 2、支持windows、Linux、Mac、安卓、IOS等几乎所有的系统观看。支持CDN图片转存,极大的减轻的服务器流量费用。 3、支持用户权限分配。方便会员制收费。

    YOLO算法-可乐罐子数据集-336张图像带标签-可乐.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    环境监测系统源代码全套技术资料.zip

    环境监测系统源代码全套技术资料.zip

    【编码解码】基于matlab罗利衰落信道编解码器设计【含Matlab源码 9930期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    四轮转向系统横摆角速度控制simulink仿真模型,利用滑模控制算法,基于八自由度车辆模型,控制有比较好的效果,附参考说明

    四轮转向系统横摆角速度控制simulink仿真模型,利用滑模控制算法,基于八自由度车辆模型,控制有比较好的效果,附参考说明。

    YOLO算法-工作场所安全隐患数据集-859张图像带标签-倒下的工人-配备个人防护装备的工人-无个人防护装备的工人-火.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    自学考试02331数据结构试题及答案2021-2022

    02142数据结构导论历年真题及答案(2012-2018共13套).rar 02331数据结构历年真题共267页2009.10-2019.4.rar 24数据结构201704_8.pdf 25数据结构201710_10.pdf 26数据结构201804_11.pdf 27数据结构201810_9.pdf 全国2021年04月高等教育自学考试02331数据结构试题及答案.docx 全国2022年04月高等教育自学考试02331数据结构试题及答案.docx 数据结构-课件.rar 第l六讲.ppt 第一讲.ppt 第七讲.ppt 第三讲.ppt 第九讲.ppt 第二讲.ppt 第五讲.ppt 第八讲.ppt 第四讲.ppt

    验收确认单表格.docx

    验收确认单表格.docx

    内存搜索工具(易).rar

    内存搜索工具(易).rar

    饮食管理系统项目源代码全套技术资料.zip

    饮食管理系统项目源代码全套技术资料.zip

    计算机视觉项目:Swin-Transformer 【tiny、small、base】模型实现的图像识别项目:番茄病害图像分类

    【项目简介】 代码主干网络采用Swin-Transformer 家族系列,包括【tiny、small、base】三种模型。pretrained和freeze_layers参数为是否采用官方预训练模型和是否仅训练分类头。为了做对比消融试验,优化器采用了Adam和SGD、AdamW三种。损失函数采用多类别的交叉熵、学习率优化策略采用cos余弦退火算法 【评估网络】 评估的指标采用loss和准确率(accuracy),分别会在训练集和验证集上进行评估、输出、绘制曲线图像。同时会在训练集、验证集进行一系列评估,包含混淆矩阵、recall、precision、F1 score等等曲线图像,以及recall、precision、F1 score、特异度的输出信息等等。 【具体各类别的指标在json文件中查看】 【如果想要更换数据集训练,参考readme文件】 【本项目为8种番茄病害图片(约4k张数据),包含数据集和标签,可以一键运行】

    (177121232)windows电脑下载OpenHarmony鸿蒙命令行工具hdc-std

    windows电脑下载OpenHarmony鸿蒙命令行工具hdc_std。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    小程序毕业设计项目-音乐播放器

    本项目可以作为小程序毕设项目,主要功能为音乐播放器,主要功能是:可以播放歌曲(采用mp3网络连接实现)、专辑封面播放时可以旋转,能够实现开始和暂停播放,可以点击下一首歌曲,主页面实现动态轮播图

    考研学习分享-JAVA-基于Vue+SpringBoot的考研学习分享平台设计与实现(毕业论文)

    考研学习分享功能的描述可以涵盖以下几个主要模块,旨在为考研学生提供一个互动、资源共享、经验交流的平台: 1. 用户注册与个人信息管理 学生可以通过邮箱或手机号注册账户,填写个人信息,如姓名、专业、目标院校等。 用户可设置学习目标和进度,方便记录自己的学习历程。 2. 学习资料共享 用户可以上传、下载考研相关学习资料,如教材、真题、笔记、复习计划等。 提供文件分类功能,按学科、院校、难度等进行整理,方便用户查找。 支持多种文件格式,如PDF、Word、Excel、图片等。 3. 复习经验分享 学生可以发布自己的复习经验文章,分享复习方法、备考心得、时间管理技巧等。 提供文章评论和互动功能,其他学生可以点赞、评论、提问,促进经验交流。 设置专栏或专题,帮助学生快速找到自己感兴趣的复习内容。 4. 考研小组与社交功能 学生可以创建或加入学习小组,组内成员可共享资料、讨论问题、互相鼓励。 提供私信、群聊功能,方便学员在小组内进行实时讨论和交流。 支持设置小组学习目标和定期检查进度,增加学习动力。 5. 在线课程与讲座 提供考研各科目(如英语、数学、政治等)的在线课程资源,用户可以报名参加。

Global site tag (gtag.js) - Google Analytics