<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市区级联选择</title> <script type="text/javascript" src="/Content/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/Content/js/public.js"></script> <style type="text/css"> body, html, ul { margin: 0px; padding: 0px; } #AreaList { list-style-type: none; } #AreaList li { float: left; line-height: 30px; height: 30px; margin-right: 5px; } </style> </head> <body> <ul id="AreaList"> <li>省份:<select name="Provice" id="Provice"> <option value="-1">请选择</option> </select></li> <li>城市:<select name="City" id="City"> <option value="-1">请选择</option> </select></li> <li>县区:<select name="Town" id="Town"> <option value="-1">请选择</option> </select></li> <li><span id="Msg"></span></li> </ul> <script type="text/javascript"> var url = "/Pages/Hander/GetAreaTown.ashx"; $(document).ready(function () { BindOption("Provice", { "flag": "Areas", "Area_ID": 0 }, function () { var areaCodes = ""; if (areaCodes != "") { loadProvice(areaCodes); } }); $("#Provice").change(function () { BindOption("City", { "flag": "Areas", "Area_ID": $("#Provice").val() }); $("#City").trigger("change"); }); $("#City").change(function () { BindOption("Town", { "flag": "Areas", "Area_ID": $("#City").val() }); $("#Town").trigger("change"); }); $("#Town").change(function () { var values = { "Provice": { name: $("#Provice option:selected").text(), value: $("#Provice").val() }, "City": { name: $("#City option:selected").text(), value: $("#City").val() }, "Town": { name: $("#Town option:selected").text(), value: $("#Town").val() } }; //alert(values.Provice.name + ":" + values.Provice.value + "||" + values.City.name + ":" + values.City.value + "||" + values.Town.name + ":" + values.Town.value); if (parent.areaChanger) parent.areaChanger.call(this, values); }); }); /** *========================== ****加载数据*** *========================== *@para Ajax请求参数 *@id：需要绑定的下拉框ID *@fn：回调函数 */ function BindOption(id, para, fn) { $("#" + id).empty(); $("#" + id).append("<option value=\"-1\">请选择</option>"); if (para.Area_ID != "-1") { changLoader(true, "Msg"); getAjax(url, para, function (data) { if (data.success) { var list = data.data, opt = ""; for (var i = 0; i < list.length; i++) { opt += "<option value=\"" + list[i][‘Area_ID‘] + "\">" + list[i][‘Area_Name‘] + "</option>"; } $("#" + id).append(opt); } changLoader(false, "Msg"); if (fn) fn.call(this); }); } } /** *========================== ****加载数据*** *========================== *@codeStr 城市区域字符串例如:13,1303,130603依次是ProviceID,CityID,TownID *@author：叶明龙 *@time：2014/06/09 */ function loadProvice(codeStr) { var datas = codeStr.split(","); $("#Provice").val(datas[0]); BindOption("City", { "flag": "Areas", "Area_ID": datas[0] }, function () { $("#City").val(datas[1]); }); BindOption("Town", { "flag": "Areas", "Area_ID": datas[1] }, function () { $("#Town").val(datas[2]); }); } </script> </body> </html>
原文：http://www.cnblogs.com/yeminglong/p/3779254.html