利用ajax实现省市县级联选择

利用ajax和javascript实现地址选择级联。

index.html：

<!DOCTYPE html>
<html>

    <head>
        <Meta charset="utf-8" />
        <title>选择省市地区</title>

    </head>

    <body>

        <form action="index.html" method="post">
            省:
            <select name="province" id="myProvinces">
                <option>请选择...</option>
            </select>
            市:
            <select name="city" id="myCity">
                <option>请选择...</option>
            </select>
            县:
            <select name="district" id="myDistrict">
                <option>请选择...</option>
            </select>
            <br /><br /><br />
            <input type="submit" value="Submit" />
        </form>

    </body>
    <script src="js/loadXmlDoc.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jilianxuanze.js" type="text/javascript" charset="utf-8"></script>

</html>

loadXmlDoc.js:

//利用ajax同步加载服务器上的文件，返回一个XML的document对象
function loadXMLDoc(dname) {
    var xmlhttp;
    if(window.XMLHttpRequest) {
        // code for IE7+,Firefox,Chrome,Opera,Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6,IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET",dname,false);
    xmlhttp.send();
    var xmlDoc = xmlhttp.responseXML;

    return xmlDoc;
}

jilianxuanze.js：

/* * 主要的思想是当页面打开的时候，调用loadXmlDoc利用aja获取省份XML数据，然后解析xml添加省份到控件中 * 当省份变化的时候，首先删除原先市控件中的数据，然后再loadXmlDoc加载市XML数据，然后再解析添加市到控件中， * 后面的县级变化以此类推 */
window.onload = function() {
    var xmlDoc_province = loadXMLDoc("data/Provinces.xml");
    //alert(xmlDoc != null);
    var province = document.getElementById("myProvinces");
    var xml_provinces = xmlDoc_province.getElementsByTagName("Province");
    for(var i = 0; i < xml_provinces.length; i++) {
        var provinceName = xml_provinces[i].firstChild.nodeValue;
        var provinceID = xml_provinces[i].getAttribute("id");
        var provinceValue = xml_provinces[i].getAttribute("name");
        var para = document.createElement("option");
        para.setAttribute("value",provinceValue);
        para.setAttribute("id",provinceID);
        var node = document.createTextNode(provinceName);
        para.appendChild(node);
        province.appendChild(para);
        //alert(provinceName);
    }
}

//当province改变时，显示对应的身份，删除之前的城市信息
document.getElementById("myProvinces").onchange = function() {
        //获取选中省份
        var select_province = document.getElementById("myProvinces");
        //选中索引
        var select_province_index = select_province.selectedIndex;
        //选中文本
        var select_province_text = select_province.options[select_province_index].text;
        //选中值
        //var select_province_value = select_province.Option[select_province_index].value;
        //alert(select_province_text);
        var select_province_id = select_province.options[select_province_index].getAttribute("id");

        var xmlDoc_city = loadXMLDoc("data/Cities.xml");
        var xml_city = xmlDoc_city.getElementsByClassName(select_province_id);
        var city = document.getElementById("myCity");
        /* * 删除所有城市子节点和县子节点 */
        //  var delete_city = city.getElementsByTagName("option");
        //  for(var i = 0; i < delete_city.length; i++) {
        //      city.remove(delete_city[i].node);
        //  }
        while(city.hasChildNodes()) {
            city.removeChild(city.firstChild);
        }
        var districe = document.getElementById("myDistrict");
        while(districe.hasChildNodes()) {
            districe.removeChild(districe.firstChild);
        }

        var para = document.createElement("option");
        var node = document.createTextNode("请选择...");
        para.appendChild(node);
        city.appendChild(para);
        for(var i = 0; i < xml_city.length; i++) {
            var cityName = xml_city[i].firstChild.nodeValue;
            var cityID = xml_city[i].getAttribute("id");
            var cityValue = xml_city[i].getAttribute("name");
            var para = document.createElement("option");
            var node = document.createTextNode(cityName);
            para.setAttribute("value",cityValue);
            para.setAttribute("id",cityID);
            para.appendChild(node);
            city.appendChild(para);
            //alert(provinceName);
        }
    }
    //当city改变时，显示县，删除之前的县信息
document.getElementById("myCity").onchange = function() {
    //获取选中shi
    var select_city = document.getElementById("myCity");
    //选中索引
    var select_city_index = select_city.selectedIndex;
    //选中文本
    var select_city_text = select_city.options[select_city_index].text;
    //选中值
    var select_city_id = select_city.options[select_city_index].getAttribute("id");

    var xmlDoc_district = loadXMLDoc("data/Districts.xml");
    var xml_district = xmlDoc_district.getElementsByClassName(select_city_id);
    var district = document.getElementById("myDistrict");
    /* * 删除所有城市子节点 */
    //  var delete_city = city.getElementsByTagName("option");
    //  for(var i = 0; i < delete_city.length; i++) {
    //      city.remove(delete_city[i].node);
    //  }
    while(district.hasChildNodes()) {
        district.removeChild(district.firstChild);
    }

    var para = document.createElement("option");
    var node = document.createTextNode("请选择...");
    para.appendChild(node);
    district.appendChild(para);
    for(var i = 0; i < xml_district.length; i++) {
        var districtName = xml_district[i].firstChild.nodeValue;
        var districtID = xml_district[i].getAttribute("id");
        var districtValue = xml_district[i].getAttribute("name");
        var para = document.createElement("option");
        var node = document.createTextNode(districtName);
        para.setAttribute("value",districtValue);
        para.setAttribute("id",districtID);
        para.appendChild(node);
        district.appendChild(para);
        //alert(provinceName);
    }
}

原文链接：https://www.f2er.com/ajax/161750.html

利用ajax实现省市县级联选择

猜你在找的Ajax相关文章