最近做项目时用到了省级联动,就想写下来,希望对一些正在为省级联动烦恼的童鞋有点帮助!不喜勿喷哟。。嘻嘻
Html中的代码(是用的Html5哟)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < ul > < li > < div style="float:left;">< label >地区</ label ></ div > < div style="float:left; margin-top:10px;" > < div class="loa_lire" style=" float:left;"> < input name="" type="text" placeholder="" class="loan_input loan_wb province" value="省" id="province" readonly="readonly" />< i class="loa_iw loa_pos2 province"></ i > < dl class="L_down2 dl_abso2 sheng" tabindex="999" style=" display:none"></ dl > </ div > < div class="loa_lire" style=" float:left;"> < input name="" type="text" placeholder="" class="loan_input loan_wb lwb_m City" value="市" id="City" readonly="readonly" />< i class="loa_iw loa_pos City"></ i > < dl class="L_down2 dl_abso2 shi" tabindex="999" style=" display:none"></ dl > </ div > </ div > </ li > </ ul > |
一般处理程序中的代码
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 | public void ProcessRequest(HttpContext context) { string str_json = string .Empty; HttpCookie cookie = context.Request.Cookies[ "RegisterUser" ]; string action = context.Request[ "action" ]; if (action == "LoansCity" ) { str_json = LoansCity(context); /*加载省、市、区/县*/ } else { str_json = "数据错误,请稍后再试" ; } context.Response.Write(str_json); context.Response.End(); } /// <summary> /// 加载省、市、区/县 /// </summary> /// <param name="context"></param> private string LoansCity(HttpContext context) { string str_json = "[" ; DataTable loansdt = new DataTable(); string Parentid= context.Request[ "Parentid" ]; string sql = string .Format( @"SELECT ID ,Parentid ,cnName ,Orderby FROM TArea where Parentid={0}" , Parentid); SqlConnection conn = new SqlConnection(GetConnString()); try { conn.Open(); using (DataSet ds = new DataSet()) { SqlCommand cmd = new SqlCommand(sql, conn); SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(ds); loansdt =ds.Tables[0]; } if (loansdt.Rows.Count > 0) { for ( int i = 0; i < loansdt.Rows.Count; i++) { if (i == 0) { str_json += "{ID:\"" + loansdt.Rows[i][ "ID" ] + "\",CityName:\"" + loansdt.Rows[i][ "cnName" ] + "\"}" ; } else { str_json += ",{ID:\"" + loansdt.Rows[i][ "ID" ] + "\",CityName:\"" + loansdt.Rows[i][ "cnName" ] + "\"}" ; } } str_json = str_json + "]" ; } else { str_json = "没有数据" ; } return str_json; } catch (Exception ex) { throw ex; } } |
用到的JS
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 | $(document).ready( function () { loansCity(); City( "0" , ".sheng" ); //窗体加载时加载所有省/市 function City(cityName, type) { $.post( "AreaHandler.ashx" , { action: "LoansCity" , Parentid: parentid}, function (data) { var json = eval( '(' + data + ')' ); for ( var i = 0; i < json.length; i++) { var dd = "<dd name='" + json[i].ID + "'>" + json[i].CityName + "</dd>" ; $(type).append(dd); }; if (type == ".sheng" ) { $( ".sheng dd" ).click( function () { $( ".shi" ).html( "" ); $( "#City" ).attr( "value" , "市" ); City($( this ).attr( "name" ), ".shi" ); }); } }); } function loansCity() { //加载省/市 $( '.province' ).click( function () { $( ".sheng" ).css( "display" , " block" ).focus(); //点击省时在市一栏中加载相应省的所有市 $( ".sheng dd" ).click( function () { var t = $( this ).html(); $( "#province" ).attr( "value" , t); $( "#City" ).attr( "value" , "市" ); $( ".sheng" ).css( "display" , " none" ); }); }); $( ".sheng" ).blur( function () { $( ".sheng" ).css( "display" , " none" ); }); //显示市、区/县 $( '.City' ).click( function () { $( ".shi" ).css( "display" , " block" ).focus(); $( ".shi dd" ).click( function () { var t = $( this ).html(); $( "#City" ).attr( "value" , t); $( "#City" ).attr( "name" , $( this ).attr( "name" )); $( ".shi" ).css( "display" , " none" ); }); }); }; $( ".shi" ).blur( function () { $( ".shi" ).css( "display" , " none" ); }); }); |
该代码的样式
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 | ul{ font-size : 14px ; height : 56px ; line-height : 56px ; width : 974px ;} ul li{ float : left ; width : 440px ; height : 56px ;} ul li label{ width : 120px ; text-align : right ; color : #444 ; padding-right : 10px ; display :inline- block ;} .loa_lire{ position : relative ;} .loa_iw{ position : absolute ; border-radius: 0 2px 2px 0 ; width : 36px ; height : 36px ; background : #27a8e5 url ( "../../Image/I%27ll%20investImg/loicon.png" ) center no-repeat ;} .loa_pos{ top : 1px ; right : 1px ;} .loa_pos 2 { top : 1px ; left : 109px ;} .loa_pos 3 { top : 11px ; right : 1px ;} .loan_input{ background : #fff ; border : 1px solid #ccc ; height : 36px ; display :inline- block ; padding : 0 6px ; font-family : "Microsoft Yahei" , "Calibri" ; outline : medium none ; border-radius: 4px ;} .loan_input:hover{ border : 1px solid #27a8e5 ; -webkit-transition: all 0.6 s; -moz-transition: all 0.6 s; -ms-transition: all 0.6 s; -o-transition: all 0.6 s; transition: all 0.6 s;} .loan_wa{ width : 296px ;} .loan_wb{ width : 132px ;} .lwb_m{ margin-left : 18px ;} .loan_Explain{ padding : 20px 0 ; width : 974px ; margin : auto ; font-size : 14px ; color : #444 ;} .loan_Explain label{ width : 120px ; text-align : right ; color : #444 ; padding-right : 10px ; display :inline- block ;} .loan_wc{ width : 736px ; height : 80px ;} .loan_Explain a{ width : 160px ; height : 36px ; background : #00a1e5 ; font-size : 16px ; line-height : 36px ; color : #FFF ; text-align : center ; border-radius: 4px ; display : block ; margin : 24px auto 10px auto ;} .loan_Explain a:hover{ background : #00aff9 ;} .dl_abso{ position : absolute ; top : 50px ; right : 0px ;} .dl_abso 2 { position : absolute ; top : 40px ; right : 0px ; height : 200px ; overflow-y: scroll ;} .L_down{ border-radius: 4px ; border : 1px solid #ccc ; background : #FFF ; width : 308px ; font-size : 14px ;} .L_down:hover{ border : 1px solid #27a8e5 ; cursor : pointer ;} .L_down dd{ height : 32px ; line-height : 32px ; color : #222 ; text-align : center ;} .L_down dd:hover{ background : #27a8e5 ; color : #FFF ;} .L_down 2 { border-radius: 4px ; border : 1px solid #ccc ; background : #FFF ; width : 144px ; font-size : 14px ;} .L_down 2: hover{ border : 1px solid #27a8e5 ; cursor : pointer ;} .L_down 2 dd{ height : 32px ; line-height : 32px ; color : #222 ; text-align : center ;} .L_down 2 dd:hover{ background : #27a8e5 ; color : #FFF ;} |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)