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 专注于网络营销推广
版权声明：本文为博主原创文章，未经博主允许不得转载。