15_JavaScript_DOM编程_实验之Select级联选择

Posted on In Views:

本节主要实现第一个选择之后自动从xml中加载第二个select……

ex-6.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一个练习</title>
<script type="text/javascript">
	window.onload = function(){
		var selectNode1 = document.getElementById("province");
		var selectNode2 = document.getElementById("city");
		
		//alert(selectNode1.value);
		selectNode1.onchange = function(){
			//alert("选中"+selectNode1.value);
	 		var XMLdocument = parseXml("cities.xml");
			var provinceNode = XMLdocument.getElementsByTagName("province");
			//alert(provinceNode.length);
			for(var i=0; i<provinceNode.length; i++){
				//alert("当前循环到"+provinceNode[i].getAttributeNode("name").nodeValue);
				if(selectNode1.value == provinceNode[i].getAttributeNode("name").nodeValue){
					//清空option中内容：
					//alert(selectNode2.innerHTML);
					selectNode2.innerHTML = "";
					var textNode1 = document.createTextNode("请选择...");
					var optionNode1 = document.createElement("option");
					optionNode1.appendChild(textNode1);
					selectNode2.appendChild(optionNode1);
					
					//alert("进入if！");
					var cityNode = provinceNode[i].getElementsByTagName("city");
					//alert(cityNode.length);
					for(var t=0; t<cityNode.length; t++){
						//alert(cityNode[t].firstChild.nodeValue);
						//<option>山东省</option>
						var textNode = document.createTextNode(cityNode[t].firstChild.nodeValue);
						var optionNode = document.createElement("option");
						optionNode.appendChild(textNode);
						selectNode2.appendChild(optionNode);
					} 
					break;
				}
			}
			//alert("end");
		}
		

		
		
		//以下为教程所用的方法：
		/* //1. 为 #province 添加 onchange 响应函数
		document.getElementById("province").onchange = function(){
			
			//1.1 把 #city 节点除第一个子节点外都移除. 
			var cityNode = document.getElementById("city");
			var cityNodeOptions = cityNode.getElementsByTagName("option");
			
			var len = cityNodeOptions.length;
			for(var i =1; i < len; i++){
				cityNode.removeChild(cityNodeOptions[1]);
			}
			
			var provinceVal = this.value;
			if(provinceVal == ""){
				return; 
			}
			
			//2. 加载 cities.xml 文件. 得到代表给文档的 document 对象
			var xmlDoc = parseXml("cities.xml");
			
			//3. 在 cities.xml 文档中查找和选择的省匹配的 province 节点.
			
			//直接使用 XPath 技术查找 XML 文档中匹配的节点. 
			var provinceEles = xmlDoc.selectNodes("//province[@name='" 
			                               + provinceVal + "']")
			                               
			//4. 再得到 province 节点的所有的 city 子节点
			var cityNodes = provinceEles[0].getElementsByTagName("city");
			
			//5. 遍历 city 子节点, 得到每一个 city 子节点的文本值
			for(var i = 0; i < cityNodes.length; i++){
				//6. 利用得到的文本值创建 option 节点
				//<option>cityName</option>
				var cityText = cityNodes[i].firstChild.nodeValue;
				var cityTextNode = document.createTextNode(cityText);
				var optionNode = document.createElement("option");
				optionNode.appendChild(cityTextNode);
				
				//7. 并把 6 创建的 option 节点添加为 #city 的子节点.
				cityNode.appendChild(optionNode);
			}

		} */
		
		//alert("end");
	}
	
	//该方法加载xml文件并返回一个类似于本文档的document对象
	function parseXml(fileName) {　　
        try{
            xmlDoc= new ActiveXObject("Microsoft.XMLDOM");  
        }catch(e){
            try{
                xmlDoc= document.implementation.createDocument("","",null);  
            }catch(e){
                alert(e.message);  
                return;  
            }  
        }  
        xmlDoc.async = false;  
        xmlDoc.load(fileName);  
        return xmlDoc;
	}
</script>
</head>
<body>
	<select id="province">
		<option value="">请选择...</option>
		<option value="河北省">河北省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="山东省">山东省</option>
	</select>

	<select id="city"><option value="...">请选择...</option></select>

</body>
</html>