无刷新三级联动（ajax）

要求使用ajax实现无刷新的三级联动

   
   
   


省
    ：
        --请选择--
        市：
        --请选择--
    县：
        --请选择--
   

前台的界面（我只是简单的搭了一下）

///WebService1页面代码///

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 GetCity(string proid)
        {
            BLL.city bctiy = new BLL.city();
            List list = bctiy.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层代码

 public List GetListModel()
        {
            return dal.GetListModel();
        }

//城市对应的BLL层代码

 public List GetListModel(string pcity)
        {
            return dal.GetListModel(pcity);
        }

县对应的BLL层代码

 public List GetListModel(string strsql)
        {
            return dal.GetListModel(strsql);
        }

省份对应的DAL层代码

 public System.Collections.Generic.List GetListModel()
        {
            System.Collections.Generic.List list = new System.Collections.Generic.List();
            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 GetListModel(string pcity)
        {
            System.Collections.Generic.List list = new System.Collections.Generic.List();
            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 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;
        }

这里是最后的效果图：