用js写二级下拉列表框

最新推荐文章于 2018-07-10 15:00:19 发布

boxyuan

最新推荐文章于 2018-07-10 15:00:19 发布

阅读量633

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/boxyuan/article/details/72643148

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
	<select id="provinceID">
		<option>选择省份</option>	
		<option>吉林省</option>	
		<option>辽宁省</option>	
		<option>山东省</option>	
	</select>
	<select id="cityID">
		<option>选择城市</option>	
	</select>
	<script type="text/javascript">
	
		//定位省份下位框，同时添加内容改变事件
		document.getElementById("provinceID").οnchange=function(){
		
			//清空原城市下拉框中的内容
			var citySelectElement = document.getElementById("cityID");
			var cityElementArray = citySelectElement.options;
			var size = cityElementArray.length;
			if(size > 1){
				for(var i=size-1;i>0;i--){
					citySelectElement.removeChild(cityElementArray[i]);
				}
			}
			
		
			//定位用户选择的选项
			var optionElement = this[this.selectedIndex];
			
			//取得用户选中选项的内容，比如：山东省
			var option = optionElement.firstChild.nodeValue;
			
			//加载XML文件
			var xmlDocument = loadXML();
			
			//去XML文件中查找<province>标签的集合
			var provinceElementArray = xmlDocument.getElementsByTagName("province");
			
			//取得<province>标签的个数
			size = provinceElementArray.length;
			
			var provinceElement = null;
			
			//循环迭代
			for(var i=0;i<size;i++){
				
				//判段下位框中的内容是否与XML文件中的name属性相同
				if(provinceElementArray[i].getAttribute("name")==option){
				
					provinceElement = provinceElementArray[i];
					
					break;
				
				}
			}
			
			if(provinceElement!=null){
			
				//取得该<province>下对应的所有<city>子标签
				var cityElementArray = provinceElement.getElementsByTagName("city");
				
				//取得该<province>下对应的<city>子标签的个数		
				size = cityElementArray.length;
				
				for(var i=0;i<size;i++){
					
					//取得该<city>标签的内容
					var city = cityElementArray[i].firstChild.nodeValue;
					
					//创建<option>对象
					var optionElement = document.createElement("option");
					
					//创建文本对象
					var txtElement = document.createTextNode(city);
					
					//将文本对象加入到<option>对象
					optionElement.appendChild(txtElement);
					
					//将新创建的<option>对象加入到城市下拉框中
					document.getElementById("cityID").appendChild(optionElement);
				
				}
			}
		} 	

		//加载xml文件
		function loadXML(){
			try{
			  //IE	
			  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
			}catch(e){
			  //非IE
			  try {
			    xmlDoc=document.implementation.createDocument("","",null);
			  }catch(e){
			    alert(e.message);
			    return;
			  }
			}
			//异步加载关闭，即同步操作
			//请求->响应->请求->响应(同步)
			//请求->请求->请求->响应->响应->响应(异步)
			xmlDoc.async=false;
			xmlDoc.load("cities.xml");
			return xmlDoc;
		 }
	</script>
  </body>
</html>

boxyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js写二级下拉列表框

选择省份吉林省辽宁省山东省选择城市 //定位省份下位框，同时添加内容改变事件 document.getElementById("provinceID").onchange=function(){ //清空原城市下拉框中的内容 var citySelectElement = document.getElementById
复制链接

扫一扫