JS+XML实现省市县三级连动

<pre name="code" class="java">JS实现类

var provincesNode, citysNode;
window.onload = function() {
   <span style="color:#006600;"> // 获取xml doc 对象</span>
    var xmlDoc = getXmlDocument();
    // 获取所有省的节点
    provincesNode = xmlDoc.getElementsByTagName("province");
    citysNode = xmlDoc.getElementsByTagName("city");
    // html中select id=pro对应节点对象
    var proNode = document.getElementById("pro");
    // 遍历
    for (var i = 0; i < provincesNode.length; i++) {
        // 获得具体省节点
        var provinceNode = provincesNode[i];
        // 获得具体的省名称 因为在Address.xml中province标签有name属性，所以在这里可以这样调用
        var provinceName = provinceNode.getAttribute("name");
        // 创建html中的 option元素节点
        var optionNode = document.createElement("option");
        // 给这个元素节点赋值
        optionNode.setAttribute("value", provinceName);
        // 设置文本属性
        optionNode.appendChild(document.createTextNode(provinceName));
        // 添加到html中select id=pro对应的节点中
        proNode.appendChild(optionNode);
    }

    // 获取选中的省的名称 因为以上proNode对option添加 并赋值 所以在这里用proNode来获取省得名称
    var selectProName = proNode.options[proNode.selectedIndex].value;

    // 获取html中city对应的节点对象
    var cityNode = document.getElementById("city");
    for (var j = 0; j < provincesNode.length; j++) {
        // 获得具体省节点
        var provinceNode = provincesNode[j];
        var provinceName = provinceNode.getAttribute("name");
        // 判断：如果选中的省份名称=for循环中的名称，则对应省份找到对应的城市
        if (selectProName == provinceName) {
            var citiesNode = provinceNode.getElementsByTagName("city");
            var townsNode = provinceNode.getElementsByTagName("country");
            var townNode = document.getElementById("town");
            for (var k = 0; k < citiesNode.length; k++) {
                var citiesName = citiesNode[k].getAttribute("name");
                var optionNode = document.createElement("option");
                optionNode.setAttribute("value", citiesName);
                optionNode.appendChild(document.createTextNode(citiesName));
                // 添加到html中select id=city对应的节点中
                cityNode.appendChild(optionNode);
                // 当前选中的city 与 循环中的city是否相同
                var selectCityName = cityNode.options[cityNode.selectedIndex].value;
                if (selectCityName == citiesName) {
                    for (var h = 0; h < townsNode.length; h++) {
                        var selectXNames = townsNode[h].getAttribute("name");
                        var optionNode = document.createElement("option");
                        // 给这个option元素节点赋值
                        optionNode.setAttribute("value", selectXNames);
                        optionNode.appendChild(document
                                .createTextNode(selectXNames));
                        // 添加到html中select id=town对应的节点中
                        townNode.appendChild(optionNode);
                    }
                }

            }
        }
    }
    proNode.onchange = selectChange;
    cityNode.onchange = selectChange2;
};
var selectChange = function() {
    var cityNode = document.getElementById("city");
    var townNode = document.getElementById("town");
    cityNode.length = 0;
    townNode.length = 0;
    // 获取html中city对应的节点对象
    var cityNode = document.getElementById("city");
    for (var j = 0; j < provincesNode.length; j++) {
        // 获得具体省节点
        var provinceNode = provincesNode[j];
        var provinceName = provinceNode.getAttribute("name");
        if (this.value == provinceName) {
            var citiesNode = provinceNode.getElementsByTagName("city");
            var townsNode = provinceNode.getElementsByTagName("country");
            var townNode = document.getElementById("town");
            for (var k = 0; k < citiesNode.length; k++) {
                var citiesName = citiesNode[k].getAttribute("name");
                // 创建html中 option元素节点
                var optionNode = document.createElement("option");
                optionNode.setAttribute("value", citiesName);
                optionNode.appendChild(document.createTextNode(citiesName));
                // 添加到html中select id=city对应的节点中
                cityNode.appendChild(optionNode);
                var selectCityName = cityNode.options[cityNode.selectedIndex].value;
                if (selectCityName == citiesName) {
                    for (var h = 0; h < townsNode.length; h++) {
                        var selectXNames = townsNode[h].getAttribute("name");
                        var optionNode = document.createElement("option");
                        // 给这个option元素节点赋值
                        optionNode.setAttribute("value", selectXNames);
                        optionNode.appendChild(document
                                .createTextNode(selectXNames));
                        // 添加到html中select id=town对应的节点中
                        townNode.appendChild(optionNode);
                    }
                }

            }
        }
    }
};
var selectChange2 = function() {
    var townNode = document.getElementById("town");
    townNode.length = 0;
    // 获取html了中id=town对应的节点对象
    for (var k = 0; k < citysNode.length; k++) {
        // var cityName = citiesNode[k].firstChild.nodeValue;
        var citiesName = citysNode[k].getAttribute("name");
        if (this.value == citiesName) {
            var townsNode = citysNode[k].getElementsByTagName("country");
            for (var h = 0; h < townsNode.length; h++) {
                var selectXNames = townsNode[h].getAttribute("name");
                var optionNode = document.createElement("option");
                // 给这个option元素节点赋值
                optionNode.setAttribute("value", selectXNames);
                optionNode.appendChild(document.createTextNode(selectXNames));
                townNode.appendChild(optionNode);
            }
        }

    }

};
function getXmlDocument() {
    // 根据不同的浏览器得到的方式不同
    // 声明一个xmlDoc对象
    var xmlDoc;
    try {
        // IE浏览器
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    } catch (ex) {
        try {
            // 其他浏览器 例如Firefox opera
            xmlDoc = document.implementation.createDocument("", "", null);
        } catch (e) {
            alert("浏览器版本过低");
        }
    }
    xmlDoc.async = false;// 异步关闭
    // 装载xml文件
    xmlDoc.load("Address.xml");
    return xmlDoc;
};
简单的HTML页面

<!DOCTYPE html>
<html>
<head>
<title>select1.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./Address.js"></script>
</head>

<body>
    <div>
        <select id="pro"><option>请选择省</option></select>
        <select id="city"><option>请选择市</option></select> 
        <select id="town"><option>请选择县</option></select>
    </div>

</body>
</html>

</pre>XML里部分的地区<?xml version="1.0" encoding="UTF-8"?><xml-body>    <province name="北京市">        <city name="北京辖区">            <country name="东城区" />            <country name="西城区" />            <country name="崇文区" />            <country name="宣武区" />            <country name="朝阳区" />            <country name="丰台区" />            <country name="石景山区" />            <country name="海淀区" />            <country name="门头沟区" />            <country name="房山区" />            <country name="通州区" />            <country name="顺义区" />            <country name="昌平区" />            <country name="大兴区" />            <country name="怀柔区" />            <country name="平谷区" />        </city>        <city name="北京辖县">            <country name="密云县" />            <country name="延庆县" />        </city>    </province>    <province name="天津市">        <city name="天津辖区">            <country name="和平区" />            <country name="河东区" />            <country name="河西区" />            <country name="南开区" />            <country name="河北区" />            <country name="红桥区" />            <country name="塘沽区" />            <country name="汉沽区" />            <country name="大港区" />            <country name="东丽区" />            <country name="西青区" />            <country name="津南区" />            <country name="北辰区" />            <country name="武清区" />            <country name="宝坻区" />        </city>        <city name="天津辖县">            <country name="宁河县" />            <country name="静海县" />            <country name="蓟县" />        </city>    </province>    <province name="河北省">        <city name="石家庄市">            <country name="长安区" />            <country name="桥东区" />            <country name="桥西区" />            <country name="新华区" />            <country name="井陉矿区" />            <country name="裕华区" />            <country name="井陉县" />            <country name="正定县" />            <country name="栾城县" />            <country name="行唐县" />            <country name="灵寿县" />            <country name="高邑县" />            <country name="深泽县" />            <country name="赞皇县" />            <country name="无极县" />            <country name="平山县" />            <country name="元氏县" />            <country name="赵县" />            <country name="辛集市" />            <country name="藁城市" />            <country name="晋州市" />            <country name="新乐市" />            <country name="鹿泉市" />        </city>        <city name="唐山市">            <country name="路南区" />            <country name="路北区" />            <country name="古冶区" />            <country name="开平区" />            <country name="丰南区" />            <country name="丰润区" />            <country name="滦县" />            <country name="滦南县" />            <country name="乐亭县" />            <country name="迁西县" />            <country name="玉田县" />            <country name="唐海县" />            <country name="遵化市" />            <country name="迁安市" />        </city>        <city name="秦皇岛市">            <country name="海港区" />            <country name="山海关区" />            <country name="北戴河区" />            <country name="青龙满族自治县" />            <country name="昌黎县" />            <country name="抚宁县" />            <country name="卢龙县" />        </city>        <city name="邯郸市">            <country name="邯山区" />            <country name="丛台区" />            <country name="复兴区" />            <country name="峰峰矿区" />            <country name="邯郸县" />            <country name="临漳县" />            <country name="武安市" />        </city>        <city name="邢台市">            <country name="南宫市" />            <country name="沙河市" />        </city>        <city name="保定市">            <country name="新市区" />            <country name="北市区" />            <country name="南市区" />            <country name="满城县" />            <country name="清苑县" />            <country name="涞水县" />            <country name="阜平县" />            <country name="徐水县" />            <country name="定兴县" />            <country name="唐县" />            <country name="高阳县" />            <country name="容城县" />            <country name="涞源县" />            <country name="望都县" />            <country name="安新县" />            <country name="易县" />            <country name="曲阳县" />            <country name="蠡县" />            <country name="顺平县" />            <country name="博野县" />            <country name="雄县" />            <country name="涿州市" />            <country name="定州市" />            <country name="安国市" />            <country name="高碑店市" />        </city>        <city name="张家口市">            <country name="桥东区" />            <country name="桥西区" />            <country name="宣化区" />            <country name="下花园区" />            <country name="宣化县" />            <country name="张北县" />            <country name="康保县" />            <country name="沽源县" />            <country name="尚义县" />            <country name="蔚县" />            <country name="阳原县" />            <country name="怀安县" />            <country name="万全县" />            <country name="怀来县" />            <country name="涿鹿县" />            <country name="赤城县" />            <country name="崇礼县" />        </city>        <city name="承德市">            <country name="双桥区" />            <country name="围场满族蒙古族自治县" />        </city>        <city name="沧州市">            <country name="泊头市" />            <country name="任丘市" />            <country name="黄骅市" />        </city>        <city name="廊坊市">            <country name="安次区" />            <country name="广阳区" />            <country name="固安县" />            <country name="永清县" />            <country name="香河县" />            <country name="大城县" />            <country name="文安县" />            <country name="大厂回族自治县" />            <country name="霸州市" />            <country name="三河市" />        </city>        <city name="衡水市">            <country name="桃城区" />            <country name="枣强县" />            <country name="武邑县" />            <country name="武强县" />            <country name="饶阳县" />            <country name="安平县" />            <country name="故城县" />            <country name="景县" />            <country name="阜城县" />            <country name="冀州市" />            <country name="深州市" />        </city>    </province></xml-body>