select级联选

JS中解析xml文档

//解析xml文件
function loadXML(fileName){
	var xmlDoc=null;
	//判断浏览器的类型
	//支持IE浏览器
	if("ActiveXObject" in window ){//注意：判断是否是IE浏览器的条件
		alert("IE浏览器");
		var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
		for(var i=0;i<xmlDomVersions.length;i++){
			try{
				xmlDoc = new ActiveXObject(xmlDomVersions[i]);
				break;
			}catch(e){
			}
		}
	}else if(document.implementation && document.implementation.createDocument){
		//支持Mozilla浏览器
		alert("firefox浏览器");
		try{
			/* document.implementation.createDocument('','',null); 方法的三个参数说明
			 * 第一个参数是包含文档所使用的命名空间URI的字符串； 
			 * 第二个参数是包含文档根元素名称的字符串； 
			 * 第三个参数是要创建的文档类型（也称为doctype）
			 */
			xmlDoc = document.implementation.createDocument('','',null);
		}catch(e){
		}
	}else{
		return null;
	}
	if(xmlDoc!=null){
		xmlDoc.async = false;
		//加载 XML 文档, 获取 XML 文档对象
		xmlDoc.load(fileName);
	}
	return xmlDoc;
}

    通过JS解析XML，可以使用DOM这个强大的工具（针对HTML、XML等文档的一套API），也就是通过getElementById或getElementTagName这些方法解析XML。

    XPath技术：(xml Path Language:xml路径语言)，专门用于xml文件中，快速定位需要元素，无需从根元素一个一个的导航到需要的子元素。可以把它当做是类似于SQL一样的查询语言。

 

java中的DOM4j开源包中有selectNodes和selectSingleNode这两个方法可以根据XPath表达式获取一个或多个节点。但在js中，不同的浏览器对XPath的解析方式不一样。

在IE6.0及以后的版本中，我们可以使用同样的方法来访问任意深度的xml数据，这给xml数据解析的操作带来了便利。

在firefox等浏览器中，则使用了w3c标准的XPath处理方式，没有IE这么简单，firefox中需要建立相对于的操作对象和计算方法，才能返回对应的节点。

在不同浏览器中都可以进行XPath操作的方法

//根据指定的XPATH表达式查找满足条件的所有节点
//@param xmldoc 执行查找的节点
//@param sXpath xpath的表达式
function selectNodes(xmldoc,sXpath){  
	if("ActiveXObject" in window ){       
		//IE浏览器     
		alert("IE浏览器");
		return xmldoc.selectNodes(sXpath);        
	}else if(window.XPathEvaluator){      
		//FireFox类浏览器       
		alert("firefox浏览器");
		var xpathObj=new XPathEvaluator();  

		if(xpathObj){  
				 var result=xpathObj.evaluate(sXpath,xmldoc,null,XPathResult.ORDERED_NODE_ITEARTOR_TYPE,null);        
			var nodes=new Array();        
			var node;        
			while((node = result.iterateNext())!=null) {        
				nodes.push(node);       
			}        
		   return nodes;  
  
		}else{  
  
			return null;                              
		}  
  
	}else{        
		return null;        
	}        
}

参考：http://m.blog.csdn.net/article/details?id=17591449

JS中实现select级联选择的代码

<script type="text/javascript">
	window.onload = function(){
		//1.为province添加onchange函数
		document.getElementById("province").onchange = function(){
			var optionNodes = this.getElementsByTagName("option");
			alert("province下的optionNodes始终是4："+optionNodes.length);
			var optionVal = null;
			for(var i = 0;i<optionNodes.length; i++){
				if(optionNodes[i].selected){
					optionVal = this.value;
					alert("选择的省："+optionVal);
				}
			}
			//把 #city 节点除第一个子节点外都移除. 
			var cityNode = document.getElementById("city");
			var cityOptionNodes = cityNode.getElementsByTagName("option");
			var optionLength = cityOptionNodes.length;
			alert("要移除的城市个数："+optionLength);
			//这种方法清不干净，会剩余一部分，原因是：节点数是动态变化的，i=1，清除第二个节点，此时，第三个节点会变为第二个节点，
			//但i变为2，清除的是第三个位置上的节点，此时中间留了一个未清除。
			//解决方法：每次都删除第二个节点或倒序删除,先删除select下的最后一个option节点
			/* for(var i=1;i<optionLength;i++){
				//cityNode.removeChild(cityOptionNodes[i]);
				cityNode.removeChild(cityOptionNodes[1]);
			} */
			for(var i=optionLength-1;i>=1;i--){
				alert(i);
				alert(cityOptionNodes[i].firstChild.nodeValue);
				cityNode.removeChild(cityOptionNodes[i]);
			}
			if(optionVal == ""){
				return;
			}
			//2.加载 cities.xml 文件. 得到代表给文档的 document 对象
			var xmlDoc = loadXML("cities.xml");
			alert("xmlDoc");
			//3.在 cities.xml 文档中查找和选择的省匹配的 province 节点.
			//直接使用 XPath 技术查找 XML 文档中匹配的节点. 
			var provinceElem = selectNodes(xmlDoc,"//province[@name='"+optionVal+"']");
			alert("provinceElem");
			//4.再得到 province 节点的所有的 city 子节点
			var cityNodes = provinceElem[0].getElementsByTagName("city");
			alert("city:"+cityNodes.length);
			//5.遍历 city 子节点, 得到每一个 city 子节点的文本值
			for(var i=0;i<cityNodes.length;i++){
				//6.利用得到的文本值创建 option 节点
				var cityText = cityNodes[i].firstChild.nodeValue;
				var optionNode = document.createElement("option");
				var cityTextNode = document.createTextNode(cityText);
				optionNode.appendChild(cityTextNode);
				//7.并把 6 创建的 option 节点添加为 #city 的子节点.
				cityNode.appendChild(optionNode);
			}
		}
		
	}
}