无刷新三级联动
<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; }
三层的方法同上一篇文章的三层相同
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构