ajax实现无刷新省市县三级联动

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下
效果图：

实现代码：
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;}

以上就是本文的全部内容，希望对大家的学习有所帮助。