AJAX三级联动省市选择，使用jquery+html+XML

来源：互联网发布：linux查看系统重启时间编辑：程序博客网时间：2024/05/17 09:23

HTML代码

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>jquery结合ajax和xml实现省市县三级联动</title>    <script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>    <script src="/js/province_city_select/province_city.js" type="text/javascript"></script></head><body>    <select id="province" name="province">    </select>    <select id="city" name="city">    </select>    <select id="area" name="area">    </select>    <div>        地址是：<span id="pro_city"></span><input id="txtAdd" type="text" />    </div></body></html>

province_city.js内容

$(function () {    var address = $("#pro_city");    var province = $("#province");    var city = $("#city");    var area = $("#area");    var preProvince = "<option value=\"\">选择省（市）</option>";    var preCity = "<option value=\"\">选择市（区）</option>";    var preArea = "<option value=\"\">选择区（县）</option>";    province.html(preProvince);    city.html(preCity);    area.html(preArea);    $.ajax({        type: "GET",        url: "/js/province_city_select/Info.xml",        success: func_suc_getXmlProvice    });    province.change(function () {        if (province.val() != "") {            city.html(preCity);            $.ajax({                type: "GET",                url: "/js/province_city_select/Info.xml",                success: func_suc_getXmlCity            });            city.change();        }    });    city.change(function () {        area.html(preArea);        $.ajax({            type: "GET",            url: "/js/province_city_select/Info.xml",            success: func_suc_getXmlArea        });    });    area.change(function () {        var value = province.find("option:selected").text() + city.find("option:selected").text() + area.find("option:selected").text();        address.text(value);        $("#txtProCity").val(value);    });    function func_suc_getXmlProvice(xml) {        var sheng = $(xml).find("prov");        sheng.each(function (i) {            province.append("<option value=" + i + ">" + sheng.eq(i).attr("text") + "</option>");        });    }    function func_suc_getXmlCity(xml) {        var xml_sheng = $(xml).find("prov");        var pro_num = parseInt(province.val());        var xml_shi = xml_sheng.eq(pro_num).find("city");        xml_shi.each(function (j) {            city.append("<option  value=" + j + ">" + xml_shi.eq(j).attr("text") + "</option>");        });    }    function func_suc_getXmlArea(xml) {        var xml_sheng = $(xml).find("prov");        var pro_num = parseInt(province.val());        var xml_shi = xml_sheng.eq(pro_num).find("city");        var city_num = parseInt(city.val());        var xml_xianqu = xml_shi.eq(city_num).find("county");        xml_xianqu.each(function (k) {            area.append("<option  value=" + k + ">" + xml_xianqu.eq(k).attr("text") + "</option>");        });    }});

Info.xml内容是中国的省市列表，有点大，完整版到这里下载

http://download.csdn.net/detail/ful1021/6555541

或者留下邮箱发送

<?xml version="1.0" encoding="gb2312"?><district><prov id="110000" text="北京市"><city id="110100" text="市辖区"><county id="110101" text="东城区"></county><county id="110102" text="西城区"></county><county id="110103" text="崇文区"></county><county id="110104" text="宣武区"></county><county id="110105" text="朝阳区"></county><county id="110106" text="丰台区"></county><county id="110107" text="石景山区"></county><county id="110108" text="海淀区"></county><county id="110109" text="门头沟区"></county><county id="110111" text="房山区"></county><county id="110112" text="通州区"></county><county id="110113" text="顺义区"></county><county id="110114" text="昌平区"></county><county id="110115" text="大兴区"></county><county id="110116" text="怀柔区"></county><county id="110117" text="平谷区"></county></city><city id="110200" text="县"><county id="110228" text="密云县"></county><county id="110229" text="延庆县"></county></city></prov></district>

云天博客：www.yuntianseo.com 专注于网络营销推广