Javascript结合XML省市级联

 

Javascript结合XML省市级联

Javascript：

var xmlDoc;

var province = new Array();//省份

var city = new Array();//市

var county = new Array();//县

 

//初始化省、市、区、县

function Init() {

    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

    xmlDoc.async = false;

    xmlDoc.load("Area.xml");

    if (xmlDoc.parseError.errorCode != 0) {

        alert("出错！" + xmlDoc.parseError.reason);

    }

    var bb = xmlDoc.selectSingleNode("address").childNodes;

    var dd = xmlDoc.selectSingleNode('//address/province[@name="北京市"]');

    var ff = xmlDoc.selectSingleNode('//address/province/city[@name="北京辖区"]');

    for (var j = 0, l1 = dd.childNodes.length; j < l1; j++) {

        var ee = dd.childNodes[j].getAttribute("name")

        city.push(ee);

    }

    for (var k = 0, l2 = ff.childNodes.length; k < l2; k++) {

        var gg = ff.childNodes[k].getAttribute("name")

        county.push(gg);

    }

    if (bb.length > 0) {

        for (var i = 0; i < bb.length; i++) {

            var aa = bb[i].getAttribute("name");

            province.push(aa);

        }

    }

    InitSelect("Select1", province);

    InitSelect("Select2", city);

    InitSelect("Select3", county);

}

//通过省名查询城市、区、县

function selectProvince(name) {

    var dd = xmlDoc.selectSingleNode('//address/province [@name="' + name + '"]');

    if (dd != null) {

        if (dd.childNodes.length > 0) {

            city = new Array();

            county = new Array();

            if (dd.childNodes.length > 0) {

                for (var i = 0; i < dd.childNodes.length; i++) {

                    var ee = dd.childNodes[i].getAttribute("name");

                    city.push(ee);

                }

                InitSelect("Select2", city);

            }

            if (dd.childNodes[0].childNodes.length > 0) {

                for (var i = 0; i < dd.childNodes[0].childNodes.length; i++) {

                    var ff = dd.childNodes[0].childNodes[i].getAttribute("name");

                    county.push(ff);

                }

                InitSelect("Select3", county);

            }

        }

    }

}

//得到所有的区或县

function selectCity(name) {

    var ff = xmlDoc.selectSingleNode('//address/province/city[@name="' + name + '"]');

    if (ff != null) {

        if (ff.childNodes.length > 0) {

            county = new Array();

            for (var i = 0; i < ff.childNodes.length; i++) {

                var gg = ff.childNodes[i].getAttribute("name");

                county.push(gg);

            }

        }

        InitSelect("Select3", county);

    }

}

 

function InitSelect(id, arrys) {

    var item;

    var obj = document.getElementById(id);

    obj.length = 0;

    for (var m = 0; m < arrys.length; m++) {

        item = document.createElement("option");

        item.text = arrys[m];

        item.value = arrys[m];

        obj.options.add(item);

    }

}

//得到所有的省份

function GetProvinces() {

    var provinces = new Array();

    var bb = xmlDoc.selectSingleNode("address").childNodes;

    if (bb.length > 0) {

        for (var i = 0; i < bb.length; i++) {

            var aa = bb[i].getAttribute("name");

            provinces.push(aa);

        }

    }

    return provinces;

}

//得到所有城市

function GetCitys(p) {

    var citys = new Array();

    var dd = xmlDoc.selectSingleNode('//address/province [@name="' + p + '"]');

    if (dd != null) {

        if (dd.childNodes.length > 0) {

            for (var i = 0; i < dd.childNodes.length; i++) {

                var gg = dd.childNodes[i].getAttribute("name");

                citys.push(gg);

            }

        }

    }

    return citys;

}

HTML：

    <select id="Select1" name="D1" onchange="selectProvince(this[this.selectedIndex].value)">

        <option></option>

    </select><select id="Select2" name="D2" onchange="selectCity(this[this.selectedIndex].value)">

        <option></option>

    </select><select id="Select3" name="D3">

        <option></option>

</select>

调用：

window.onload = function() {

Init();

}

点我下载XML数据源