有javascrip兑现的选项级联

有javascrip实现的选项级联
用js写的选择省后，该省的所有城市全都显示出来。

第1步、建xml文件，用xml存放省和城市的信息


Province.xml
<?xml version="1.0" encoding="UTF-8"?>
<provinces>
  <province name="河北">
    <city>邢台</city>
    <city>廊坊</city>
    <city>石家庄</city>
    <city>衡水</city>
    <city>保定</city>
    <city>新乐</city>
  </province>
  <province name="河南">
    <city>开封</city>
    <city>洛阳</city>
    <city>商丘</city>
    <city>安阳</city>
    <city>郑州</city>
    <city>平顶山</city>
  </province>
  <province name="北京">
    <city>上地</city>
    <city>朝阳</city>
    <city>公主坟</city>
    <city>海淀</city>
    <city>大兴</city>
    <city>东城</city>
  </province>
</provinces>

第2步、建立html文件

ShowProvince.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ShowProvince.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>
   <h1>省的级联实现</h1>
   <span>
   <select id="provinces">
   <option>请选择省份</option>
   </select>
   <select id="cities">
   <option>请选择城市</option>
   </select>
   </span>
  </body>
</html>
<script>
window.onload=function (){
//加载xml文件
var xmlDom;
	try{
		//Microsoft加载方法
		xmlDom=new ActiveXObject("Microsoft.XMLDOM");
	}catch(exception){
		try{
			//其他的浏览器的加载方法
			xmlDom=document.implementation.createDocument("", "", null);
			
		}catch(e){
		
		}
	}
	//关闭异步加载
	xmlDom.async = "false";
	//加载***.xml
	xmlDom.load("Province.xml");
	//获得根节点
	alert(root+"===");
	var root = xmlDom.documentElement;
	alert(root.nodeName);
	//获得根节点中的所有元素
	var provinces= root.getElementsByTagName("province");
	
	//获得html中的省object
	var pro=document.getElementById("provinces");
	
	//遍历所有的结点
	for(var i=0;i<provinces.length;i++){
		//获得xml中所有的province的标签中的name属性，这些属性将要写的html中去
		var province =provinces[i].getAttribute("name");
		
		//创建一个Element放到pro中
		var opt=document.createElement("option");
		//向文本中添加内容
		opt.appendChild(document.createTextNode(province));
		//向pro中添加
		pro.appendChild(opt);
		
	}
	//获得city
	var cities = document.getElementById("cities");
	//省改变时
	var opts=pro.options;
	pro.onchange = function() {
		
		// pce = document.getElementById("provinces");
		//var opts = pce.options;
		var opt1 = opts[pro.selectedIndex];

		var name = opt1.innerHTML;
		for ( var i = 0; i < provinces.length; i++) {
			//获取省节点的name属性的值
			var name1 = provinces[i].getAttribute("name");
			if (name == name1) {
			    cities.length=1;//每次改变的时候清空
				var pros =provinces[i];
				var citys = pros.getElementsByTagName("city");				
				for ( var j = 0; j < citys.length; j++) {
					//创建一个option
					var opt1 = document.createElement("option");
					//为option添加文本
					opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
					//添加到父节点中
					cities.appendChild(opt1);
				}
			}

		}

	}

}
</script>

所有的浏览器都支持！！

欢迎访问：http://student.****.net/space.php?uid=480051，这里有我的更多原创！！

有javascrip兑现的选项级联

相关推荐