cities.html
- <!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=gb2312">
- <title>Untitled Document</title>
- <script type="text/javascript" src="cities.js"></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>
cities.js
- window.onload = function()
- {
- // 解析 XML 文档 , 得到 xml 文档的 china 根节点
- var xmlDocument = parseXml("cities.xml");
- var chinaNode = xmlDocument.childNodes[1];
- // 为 id="province" 的 select 节点添加 onchange 事件 , 获取选择的省的 value
- var provinceNode = document.getElementById("province");
- provinceNode.onchange = function()
- {
- // ** 清空 provice 节点出 <option value="..."> 请选择 ...</option> 的所有子节点 **
- var cityNode = document.getElementById("city");
- var cityNodeOptionNodes = cityNode.getElementsByTagName("option");
- var length = cityNodeOptionNodes.length;
- for(var i = length - 1; i > 0; i--)
- {
- cityNode.removeChild(cityNodeOptionNodes[i]);
- }
- /*
- //如果从前往后进行删除的话,因为methodNode是动态变的,所以每次都清理第二个值,也就是请选择后边的那个值就可以了
for(var i=1;i<len;i++){
cityNode.removeChild(cityNodeOptionNodes[i]);
}
- */
- var provinceValue = this.value;
- // 用 provinceValue 去 xml 文档中获取对应的 province 节点
- var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']");
- // 获取 3 provinceNodeInXmlFile 的所有 city 子节点的文本值 : cityValue
- var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city");
- for (var i = 0; i < cityNodesInXmlFile.length; i++)
- {
- var cityNodeInXmlFile = cityNodesInXmlFile[i];
- var cityValue = cityNodeInXmlFile.firstChild.nodeValue;
- // 利用 得到的文本值创建 option 节点 : <option value='cityValue'>cityValue</option>
- var optionNode = document.createElement("option");
- optionNode.setAttribute("value", cityValue);
- var optionNodeTextNode = document.createTextNode(cityValue);
- optionNode.appendChild(optionNodeTextNode);
- // 把创建好的 option 节点添加到 id="city" 的 select 节点中
- cityNode.appendChild(optionNode);
- }
- };
- // 解析 xml 文件的函数
- function parseXml(fileName)
- {
- //IE 内核的浏览器
- if (window.ActiveXObject)
- {
- // 创建 DOM 解析器
- var doc = new ActiveXObject("Microsoft.XMLDOM");
- doc.async = "false";
- // 加载 XML 文档 , 获取 XML 文档对象
- doc.load(fileName);
- return doc;
- }
- //Mozilla 浏览器
- else if (window.DOMParser)
- {
- // 创建 DOM 解析器
- var p = new DOMParser();
- // 创建 DOM 解析器
- return p.parseFromString(fileName, "text/xml");
- }
- else
- {
- return false;
- }
- }
- }
cities.xml
- <?xml version="1.0" encoding="GB2312"?>
- <china>
- <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>
- <province name="山东省">
- <city> 济南 </city>
- <city> 青岛 </city>
- <city> 威海 </city>
- <city> 烟台 </city>
- <city> 潍坊 </city>