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

最新推荐文章于 2020-12-21 23:40:05 发布

原创最新推荐文章于 2020-12-21 23:40:05 发布 · 5.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX #三级联动 #省市选择 #html #XML

本文介绍了一个使用jQuery结合Ajax和XML技术实现的省市县三级联动选择器。该选择器能够根据用户选择的省份自动加载对应的市级选项，并进一步加载县级选项。

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.youkuaiyun.com/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 专注于网络营销推广