存储过程+Jquery+WebService实现三级联动:
首先看一下数据库的设计:
2.存储过程的写法:
1 2 3 4 5 6 7 8 9 10 | ALTER proc [dbo].[pro_GetCity]( @city_pid int ) as begin --SELECT * FROM tbl_city WHERE city_pid IN ( select * from tbl_city where city_pid=@city_pid end --exec [dbo].[pro_GetCity] 0 |
看一下执行效果:
服务层的代码:
1 2 3 4 5 6 7 8 | // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 [System.Web.Script.Services.ScriptService] [WebMethod] public string CityList( string citycode) { return JsonHelper.GetJson<List<tbl_city>>( new SelectComboxBLL().CityList(citycode)); } |
数据层的代码:
1 2 3 4 5 | public List<tbl_city> CityList( string citycode) { SqlParameter[] pars = { new SqlParameter( "@city_pid" , citycode) }; return new SQLBase().TableToEntity<tbl_city>(DBhelp.SqlHelper.GetTable( "pro_GetCity" , System.Data.CommandType.StoredProcedure, pars)); } |
业务层:
1 2 3 4 | public List<tbl_city> CityList( string citycode) { return new SelectCombox().CityList(citycode); } |
最核心的jquery调用WebService:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <script type= "text/javascript" > $(function () { //省市县的绑定 $.ajax({ type: "post" , contentType: "application/json" , url: "/WebService/SelectComboxService.asmx/CityList" , data: "{citycode:'0'}" , success: function (result) { var arr = null ; if ( typeof result.d == 'string' ) arr = JSON.parse(result.d); else arr = result.d; var stroption = '' ; for ( var i = 0; i < arr.length; i++) { stroption += '<option value=' + arr[i]._city_id + '>' ; stroption += arr[i]._name; stroption += '</option>' ; } $( '#seprovince' ).append(stroption); } }) $( '#seprovince' ).change(function () { $( '#secity option:gt(0)' ).remove(); $( '#searea option:gt(0)' ).remove(); $.ajax({ type: "post" , contentType: "application/json" , url: "/WebService/SelectComboxService.asmx/CityList" , data: "{citycode:'" + $( this ).val() + "'}" , success: function (result) { var arr = null ; if ( typeof result.d == 'string' ) arr = JSON.parse(result.d); else arr = result.d; var strocity = '' ; for ( var i = 0; i < arr.length; i++) { strocity += '<option value=' + arr[i]._city_id + '>' ; strocity += arr[i]._name; strocity += '</option>' ; } $( '#secity' ).append(strocity); } }) }) $( '#secity' ).change(function () { $( '#searea option:gt(0)' ).remove(); $.ajax({ type: "post" , contentType: "application/json" , url: "/WebService/SelectComboxService.asmx/CityList" , data: "{citycode:'" + $( this ).val() + "'}" , success: function (result) { var arr = null ; if ( typeof result.d == 'string' ) arr = JSON.parse(result.d); else arr = result.d; var stroarea = '' ; for ( var i = 0; i < arr.length; i++) { stroarea += '<option value=' + arr[i]._city_id + '>' ; stroarea += arr[i]._name; stroarea += '</option>' ; } $( '#searea' ).append(stroarea); } }) }) }); |
前端页面:
1 2 3 4 5 6 7 8 | < tr > < td >** 详细地址:</ td > < td style="width:60%"> < select id="seprovince">< option >--请选择--</ option ></ select >省 < select id="secity">< option >--请选择--</ option ></ select >市 < select id="searea">< option >--请选择--</ option ></ select >区(县) </ td > </ tr >< br > |
最后来张效果图:
当然里面用了一些公用类库,有需要的私聊!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)