Three-level linkage between provinces, cities and counties without ajax refreshing

This time I will bring you the three-level linkage of provinces, cities and counties without ajax refreshing. What are the things to note ? Here are the actual cases. One Get up and take a look.

The example in this article shares with you the specific code for ajax to realize three-level linkage of provinces, cities and counties without refreshing for your reference. The specific content is as follows

Rendering:

Implementation code:

1, html:

  <title></title>
    <style>
    select
    {
      width: 150px;
    }
  </style>
  <script></script>
  <script>
    $(function () {
      $.ajax({
        type: "post",
        contentType: "application/json",
        url: "WebService1.asmx/GetProvince",
        data: "{}",
        success: function (result) {
          var stroption = &#39;&#39;;
          for (var i = 0; i < result.d.length; i++) {
            stroption += &#39;<option value=&#39; + result.d[i].provinceID + &#39;>&#39;;
            stroption += result.d[i].provincename;
            stroption += &#39;&#39;;
          }
          $(&#39;#seprovince&#39;).append(stroption);
        }
      })
      $(&#39;#seprovince&#39;).change(function () {
       $(&#39;#secity option:gt(0)&#39;).remove();
        $(&#39;#searea option:gt(0)&#39;).remove();
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetCItyByPro",
          data: "{proid:&#39;" + $(this).val() + "&#39;}",
          success: function (result) {
            var strocity = &#39;&#39;;
            for (var i = 0; i < result.d.length; i++) {
              strocity += &#39;<option value=&#39; + result.d[i].cityID + &#39;>&#39;;
              strocity += result.d[i].cityname;
              strocity += &#39;&#39;;
            }
            $(&#39;#secity&#39;).append(strocity);
          }
        })
      })
      $(&#39;#secity&#39;).change(function () {
        $(&#39;#searea option:gt(0)&#39;).remove();
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetAreaByCity",
          data: "{cityid:&#39;" + $(this).val() + "&#39;}",
          success: function (result) {
            var stroarea = &#39;&#39;;
            for (var i = 0; i < result.d.length; i++) {
              stroarea += &#39;<option value=&#39; + result.d[i].areaID + &#39;>&#39;;
              stroarea += result.d[i].areaname;
              stroarea += &#39;&#39;;
            }
            $(&#39;#searea&#39;).append(stroarea);
          }
        })
      })
    })
  </script>


 

                                                                                                                          

用户名
密码
确认密码
邮箱
地址	--请选择--                  省                    --请选择--         市                    --请选择--         县

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;
    }
  }
}</model.area></model.area></model.city></model.city></model.province></model.province>

Add the following properties to city.cs and area.cs in the three-layer Bll layer

//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);
    }</model.area></model.city>

Add the following methods to city.cs and area.cs in the three-layer DAL layer respectively

//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;
    }</model.area></model.area></model.area></model.city></model.city></model.city>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the php Chinese website article!

Recommended reading:

AJAX implements loading after displaying the page

How does AJAX implement asynchronous refresh and partial refresh

The above is the detailed content of Three-level linkage between provinces, cities and counties without ajax refreshing. For more information, please follow other related articles on the PHP Chinese website!