JavaScript DOM编程学习笔记-select级联选择

来源：互联网发布：网文枪手知乎编辑：程序博客网时间：2024/06/06 03:28

以下代码浏览器兼容性不好。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Document</title><script type="text/javascript">//window.onload = function() {//为province添加onchange响应函数document.getElementById("province").onchange = function(){//alert("ochange");var cityNode = document.getElementById("city");var cityNodeOptions = cityNode.getElementsByTagName("option");//清空cityNode上的节点for(var i = cityNode.length; i > 1; i--){cityNode.removeChild(cityNodeOptions[i-1]);}//如果前一个select是“请选择”，则不执行操作var provinceVal = this.value;if(provinceVal == ""){return;} var xmlDoc = parseXml("cities.xml");//var provinces = xmlDoc.getElementsByTagName("province");//alert(provinces.length);//直接使用 XPath 技术查找 XML 文档中匹配的节点. var provinceEles = xmlDoc.selectNodes("//province[@name='" + provinceVal + "']");var cityNodes = provinceEles[0].getElementsByTagName("city");//alert(cityNodes.length);for(var i = 0; i < cityNodes.length; i++){//alert(cityNodes[i].firstChild.nodeValue);var cityText = cityNodes[i].firstChild.nodeValue;var cityTextNode = document.createTextNode(cityText);var optionNode = document.createElement("option");optionNode.appendChild(cityTextNode);cityNode.appendChild(optionNode);}}//js 解析 xml 文档的函数, 只支持 iefunction parseXml(fileName){    //IE 内核的浏览器    if (window.ActiveXObject) {        //创建 DOM 解析器        var doc = new ActiveXObject("Microsoft.XMLDOM");        doc.async = "false";        //加载 XML 文档, 获取 XML 文档对象        doc.load(fileName);        return doc;    }}}</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></html>

cities.xml

<?xml version="1.0" encoding="GBK"?><china><province name="河北省"><city>石家庄</city><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></province><province name="山东省"><city>济南</city><city>青岛</city><city>威海</city><city>烟台</city><city>潍坊</city></province></china>

本文出自 “优赛工作室” 博客，转载请与作者联系！

0 0

JavaScript DOM编程 学习笔记-select级联选择

JavaScript DOM编程学习笔记-select级联选择