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);}}}}