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 專註於網路營銷推廣
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
