ajax不刷新的情况下省市县三级联动

这次给大家带来ajax不刷新的情况下省市县三级联动，ajax不刷新实现省市县三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

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

效果图：

实现代码：

1、html：

          select    {      width: 150px;    }          $(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 += '';            stroption += result.d[i].provincename;            stroption += '';          }          $('#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 += '';              strocity += result.d[i].cityname;              strocity += '';            }            $('#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 += '';              stroarea += result.d[i].areaname;              stroarea += '';            }            $('#searea').append(stroarea);          }        })      })    })   
    
      
        用户名      
      
              
    
    
      
        密码      
      
              
    
    
      
        确认密码      
      
              
    
    
      
        邮箱      
      
              
    
    
      
        地址      
      
                  --请选择--                省                  --请选择--        市                  --请选择--        县      
    
  

登录后复制

2、WebService1.asmx

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;namespace 省市县三级联动{  /// 
  /// WebService1 的摘要说明  /// 
  [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 GetProvince()    {      BLL.province bpro = new BLL.province();      List list = bpro.GetListModel();      return list;    }    [WebMethod]    public List GetCItyByPro(string proid)    {      BLL.city bcity = new BLL.city();      List list = bcity.GetListModel("father='" + proid + "'");      return list;    }    [WebMethod]    public List GetAreaByCity(string cityid)    {      BLL.area barea = new BLL.area();      List list = barea.GetListModel("father='" + cityid + "'");      return list;    }  }}

登录后复制

在三层的Bll层中的city.cs和area.cs中分别添加以下属性

//city.cs：  public List GetListModel(string strsql)    {      return dal.GetListModel(strsql);    }//area.cs：   public List GetListModel(string strsql)    {      return dal.GetListModel(strsql);    }

登录后复制

在三层的DAL层中的city.cs和area.cs中分别添加以下方法

//city.cs：public System.Collections.Generic.List GetListModel(string strsql)    {      System.Collections.Generic.List list = new System.Collections.Generic.List();      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 GetListModel(string strsql)    {      DataTable dt = GetList(strsql).Tables[0];      System.Collections.Generic.List list = new System.Collections.Generic.List();      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怎么实现异步刷新和局部刷新

以上就是ajax不刷新的情况下省市县三级联动的详细内容，更多请关注【创想鸟】其它相关文章！