三级联动使用Jquery实现城市三级数据联动的实例.doc

三级联动使用 Jquery 春暖花会开! 如果你曾经历过冬天,那么你就会有春色!如果你有着信念,那么春天一定会遥远;如果你正在付出,那么总有一天你会拥有花开满圆。使用 Jquery 实现城市三级数据联动的实例 View: <script type="text/javascript"> $(document).ready(function() { GetByJquery(); $("#ddlProvince").change(function() { GetCity() }); $("#ddlCity").change(function() { GetDistrict() }); }); function GetByJquery() { $("#ddlProvince").empty(); // 清空省份 SELECT 控件$.getJSON("/ajax/GetProvinceList", function(data) { $.each(data, function(i, item) { $("<option></option>") .val(item["ProvinceID"]) .text(item["ProvinceName"]) .appendTo($("#ddlProvince")); }); GetCity(); }); } function GetCity() { $("#ddlCity").empty(); // 清空城市 SELECT 控件 var url ="/ajax/GetCityList/" + $("#ddlProvince").val(); $.getJSON(url, function(data) { $.each(data, function(i, item) { $("<option></option>") .val(item["CityID"]) .text(item["CityName"]) .appendTo($("#ddlCity")); }); GetDistrict(); }); } function GetDistrict() { $("#ddlDistrict").empty(); // 清空市区 SELECT 控件 var url = "/ajax/GetDistrictList/" + $("#ddlCity").val(); $.getJSON(url, function(data) { $.each(data, function(i, item) { $("<option></option>") .val(item["DistrictID"]) .text(item["DistrictName"]) .appendTo($("#ddlDistrict")); }); }); } </script> <table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table> Controller : using System; using