js 解析xml 实现二级联动 已经解决浏览器差异有关问题
日期：2014-05-16 浏览次数：20330 次
city.xml? 文件
?
<?xml version="1.0" encoding="UTF-8"?>
<cities>
?<province name="北京">
??<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>
??<city>承德</city>
?</province>
?<province name="河南">
??<city>郑州</city>
??<city>安阳</city>
??<city>平顶山</city>
??<city>开封</city>
??<city>商丘</city>
??<city>洛阳</city>
?</province>
</cities>
?
?
select.html 文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
??? <title>select.html</title>
?
??? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
??? <meta http-equiv="description" content="this is my page">
??? <meta http-equiv="content-type" content="text/html; charset=UTF-8">
???
??? <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
? </head>
?
? <body><br>
??? <span>
??? <select id="province">
??? <option>?
??? ?请选择省
??? </option>
??? </select></span>
???
??? <span>
??? <select id="cities">
??? <option>
??请选择相应省下面的市
?</option>
??? </select>
??? </span>
? </body>
</html>
<script type="text/javascript">
??function getXmlDoc() {
???var xmlDoc ;
??try{
??//针对的是IE浏览器 创建一个空的微软 XML 文档对象
??xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
??}catch(e){
???try{
????//在 Firefox 及其他浏览器中的 XML 解析器
???//创建一个空的 XML 文档对象。
????xmlDoc = document.implementation.createDocument("","",null);
????
???}catch(er){
???}
??}
??//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
??xmlDoc.async = false;
??//解析器加载名为 "xxx.xml" 的 XML 文档、
??xmlDoc.load("city.xml");
??return xmlDoc;
??}
? window.onload = function() {
?var xmlDoc = getXmlDoc();
? //获得根节点
?var root = xmlDoc.documentElement;
??//获得省节点
?var provinces = root.childNodes;
??//获得第一个下拉框对象
??var province = document.getElementById("province");
??//把XML省节点的值添加到省下拉列表中
??for(var i=0;i<provinces.length;i++) {
???//兼容问题解决方法
???if(provinces[i].nodeType==1) {
???//获得省节点的属性为name的属性值
???var name = provinces[i].getAttribute("name");
???//创建一个option
???var opt = document.createElement("option");
???//创建省下拉列表中OPTION的值为得到的属性值的值
???opt.appendChild(document.createTextNode(name));
???//添加到下拉列表中
???province.appendChild(opt);
???}
??
??}
??//得到第二个下拉对象
??var cities = document.getElementById("cities");
??province.onchange = function() {
???//获得第一个下拉框对象
???var pce = document.getElementById("province");
???//获取下拉框对象的所有OPTION
???var opts = pce.options;
???//获取被选中的下拉对象
???var opt1 = opts[pce.selectedIndex];
???//获取被选中的下拉文本对象的值（OPTION中间的文本）
???var name = opt1.text;?? //opt1.innerHTML
???for(var i=0;i<provinces.length;i++) {
????if(provinces[i].nodeType == 1) {
????//获取省节点的name属性值
????var name1 = provinces[i].getAttribute("name");
????//判断如果选中文本本的值，等于<province>属性值就把这个属性值的city值添加到第二个下拉列表中
????if(name = name1) {
?????//清空下拉列表的值
?????cities.length = 1;
?????//得到当前选中的<province>对象
?????var pros = provinces[i];
?????//得到当前选中的<province>的子节点
?????var citys = pros.childNodes;
?????for (var j=0;j<citys.length;j++) {
??????//兼容问题解决方法
??????if(citys[j].nodeType == 1) {
