<script type="text/javascript"> $(function () { $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetListProvince", Data: "{}", success: function (result) { var strDrop = ''; for (var i = 0; i < result.d.length; i++) { strDrop += "<option value='" + result.d[i].provinceID + "' >" + result.d[i].provinceName + "</option>"; } $('#Province').append(strDrop); } })
$('#Province').change(function () { $('#City option:gt(0)').remove(); $('#Area option:gt(0)').remove(); $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetListCity", data: "{Id:'" + $(this).val() + "'}", success: function (result) { var strCity = ''; for (var i = 0; i < result.d.length; i++) { strCity += "<option value='" + result.d[i].cityID + "' >" + result.d[i].cityName + "</option>"; } $('#City').append(strCity); } }) })
$('#City').change(function () { $('#Area option:gt(0)').remove(); $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetListArea", data: "{Id:'" + $(this).val() + "'}", success: function (result) { var strArea = ''; for (var i = 0; i < result.d.length; i++) { strArea += "<option value='" + result.d[i].areaID + "' >" + result.d[i].areaName + "</option>"; } $('#Area').append(strArea); } }) })
}) </script>
<select id="Province">
<option>--请选择--</option>
</select>省
<select id="City">
<option>--请选择--</option>
</select>市
<select id="Area">
<option>--请选择--</option>
</select>县
WebService
[WebMethod] public List<Model.province> GetListProvince() { BLL.province bll_Province = new BLL.province(); List<Model.province> list = bll_Province.GetListModel(); return list; }
[WebMethod] public List<Model.city> GetListCity(string Id) { BLL.city bll_City = new BLL.city(); List<Model.city> list = bll_City.GetListCity("father='"+Id+"'"); return list; }
[WebMethod] public List<Model.area> GetListArea(string Id) { BLL.area bll_area = new BLL.area(); List<Model.area> list = bll_area.GetlistArea("father='" + Id + "'"); return list; }
三层的方法同上一篇文章的三层相同