这篇文章主要介绍“ajax如何实现无刷新省市县三级联动”,在日常操作中,相信很多人在ajax如何实现无刷新省市县三级联动问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ajax如何实现无刷新省市县三级联动”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
昌邑ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
效果图:
实现代码:
1、html:
<html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetProvince", data: "{}", success: function (result) { var stroption = ''; for (var i = 0; i < result.d.length; i++) { stroption += '<option value=' + result.d[i].provinceID + '>'; stroption += result.d[i].provincename; 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: "WebService1.asmx/GetCItyByPro", data: "{proid:'" + $(this).val() + "'}", success: function (result) { var strocity = ''; for (var i = 0; i < result.d.length; i++) { strocity += '<option value=' + result.d[i].cityID + '>'; strocity += result.d[i].cityname; strocity += '</option>'; } $('#secity').append(strocity); } }) }) $('#secity').change(function () { $('#searea option:gt(0)').remove(); $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetAreaByCity", data: "{cityid:'" + $(this).val() + "'}", success: function (result) { var stroarea = ''; for (var i = 0; i < result.d.length; i++) { stroarea += '<option value=' + result.d[i].areaID + '>'; stroarea += result.d[i].areaname; stroarea += '</option>'; } $('#searea').append(stroarea); } }) }) }) </script> </head> <body> <table> <tr> <td> 用户名 </td> <td> <input id="Text1" type="text" /> </td> </tr> <tr> <td> 密码 </td> <td> <input id="Text2" type="text" /> </td> </tr> <tr> <td> 确认密码 </td> <td> <input id="Text3" type="text" /> </td> </tr> <tr> <td> 邮箱 </td> <td> <input id="Text4" type="text" /> </td> </tr> <tr> <td> 地址 </td> <td> <select id="seprovince"> <option>--请选择--</option> </select> 省 <select id="secity"> <option>--请选择--</option> </select>市 <select id="searea"> <option>--请选择--</option> </select>县 </td> </tr> </table> </body> </html>
2、WebService1.asmx
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; namespace 省市县三级联动 { /// <summary> /// WebService1 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public List<Model.province> GetProvince() { BLL.province bpro = new BLL.province(); List<Model.province> list = bpro.GetListModel(); return list; } [WebMethod] public List<Model.city> GetCItyByPro(string proid) { BLL.city bcity = new BLL.city(); List<Model.city> list = bcity.GetListModel("father='" + proid + "'"); return list; } [WebMethod] public List<Model.area> GetAreaByCity(string cityid) { BLL.area barea = new BLL.area(); List<Model.area> list = barea.GetListModel("father='" + cityid + "'"); return list; } } }
在三层的Bll层中的city.cs和area.cs中分别添加以下属性
//city.cs: public List<Model.city> GetListModel(string strsql) { return dal.GetListModel(strsql); } //area.cs: public List<Model.area> GetListModel(string strsql) { return dal.GetListModel(strsql); }
在三层的DAL层中的city.cs和area.cs中分别添加以下方法
//city.cs: public System.Collections.Generic.List<Model.city> GetListModel(string strsql) { System.Collections.Generic.List<Model.city> list = new System.Collections.Generic.List<Model.city>(); DataTable dt = GetList(strsql).Tables[0]; foreach (DataRow row in dt.Rows) { Model.city mcity = new Model.city(); mcity.id = Convert.ToInt32(row["id"]); mcity.cityID = row["cityID"].ToString(); mcity.cityname = row["cityname"].ToString(); list.Add(mcity); } return list; } //area.cs: public System.Collections.Generic.List<Model.area> GetListModel(string strsql) { DataTable dt = GetList(strsql).Tables[0]; System.Collections.Generic.List<Model.area> list = new System.Collections.Generic.List<Model.area>(); foreach (DataRow row in dt.Rows) { Model.area marea = new Model.area() { id = Convert.ToInt32(row["id"]), areaID = row["areaID"].ToString(), areaname = row["areaname"].ToString() }; list.Add(marea); } return list; }
到此,关于“ajax如何实现无刷新省市县三级联动”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
文章题目:ajax如何实现无刷新省市县三级联动
本文地址:/article12/igppgc.html
成都网站建设公司_创新互联,为您提供品牌网站制作、定制网站、网站建设、域名注册、网站设计、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联