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如何实现无刷新省市县三级联动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！