要求使用ajax实现无刷新的三级联动
<head> <title></title> <script src="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 op = ""; for (var i = 0; i < result.d.length; i++) { op += '<option value=' + result.d[i].provinceID + '>'; op += result.d[i].provincename; op += '</option>'; } $("#seprovince").append(op); } })
、、、、、、、、、、、当省份发生改变时,城市改变、、、、、、、、、、、、、、、、、 $('#seprovince').change(function () {
$('#secity option:gt(0)').remove(); $('#searea option:gt(0)').remove(); $.ajax({ type: "post", url: "WebService1.asmx/GetCity", 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 () { $.ajax({ type: "post", 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> 省 :<select id="seprovince"> <option>--请选择--</option></select> 市:<select id="secity"> <option>--请选择--</option></select> 县:<select id="searea"> <option>--请选择--</option> </select> </body> </html>
前台的界面(我只是简单的搭了一下)
///////////////////////////////////WebService1页面代码///////////////////////////////////////
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> GetCity(string proid) { BLL.city bctiy = new BLL.city(); List<Model.city> list = bctiy.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层代码
public List<Model.province> GetListModel() { return dal.GetListModel(); }
//////////城市对应的BLL层代码
public List<Model.city> GetListModel(string pcity) { return dal.GetListModel(pcity); }
////////////////县对应的BLL层代码
public List<Model.area> GetListModel(string strsql) { return dal.GetListModel(strsql); }
////////////////////省份对应的DAL层代码
public System.Collections.Generic.List<Model.province> GetListModel() { System.Collections.Generic.List<Model.province> list = new System.Collections.Generic.List<Model.province>(); DataTable dt = GetList("").Tables[0]; foreach (DataRow row in dt.Rows) { Model.province mpro = new Model.province(); mpro.id = Convert.ToInt32(row["id"]); mpro.provinceID = row["provinceID"].ToString(); mpro.provincename = row["provincename"].ToString(); list.Add(mpro); } return list; }
/////////////////////城市对应的DAL层代码
public System.Collections.Generic.List<Model.city> GetListModel(string pcity) { System.Collections.Generic.List<Model.city> list = new System.Collections.Generic.List<Model.city>(); DataTable dt = GetList(pcity).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; }
//////////////////县对应的DAL层代码
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; }
这里是最后的效果图: (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|