ajax实现无刷新省市县三级联动

前端  /  管理员 发布于 5年前   494

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

效果图：

实现代码：

1、html：

<html><head>  <title></title>    <style type="text/css">    select    {      width: 150px;    }  </style>  <script src="//article/js/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 stroption = '';          for (var i = 0; i < result.d.length; i++) {            stroption += '<option value=' + result.d[i].provinceID + '>';            stroption += result.d[i].provincename;            stroption += '</option>';          }          $('#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 += '<option value=' + result.d[i].cityID + '>';              strocity += result.d[i].cityname;              strocity += '</option>';            }            $('#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 += '<option value=' + result.d[i].areaID + '>';              stroarea += result.d[i].areaname;              stroarea += '</option>';            }            $('#searea').append(stroarea);          }        })      })    })  </script></head><body> <table>    <tr>      <td>        用户名      </td>      <td>        <input id="Text1" type="text" />      </td>    </tr>    <tr>      <td>        密码      </td>      <td>        <input id="Text2" type="text" />      </td>    </tr>    <tr>      <td>        确认密码      </td>      <td>        <input id="Text3" type="text" />      </td>    </tr>    <tr>      <td>        邮箱      </td>      <td>        <input id="Text4" type="text" />      </td>    </tr>    <tr>      <td>        地址      </td>      <td>        <select id="seprovince">          <option>--请选择--</option>        </select>        省        <select id="secity">          <option>--请选择--</option>        </select>市        <select id="searea">          <option>--请选择--</option>        </select>县      </td>    </tr>  </table></body></html>

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;    }  }}

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

//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);    }

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

//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;    }

以上就是本文的全部内容，希望对大家的学习有所帮助。


  • 上一条：
    ajax无刷新分页的简单实现
    下一条：
    Ajax验证用户的唯一性

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客