欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-29 09:38:49
本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下 效果图: 实现代码: 1、html:

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

效果图:

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

实现代码:

1、html:

<html>
<head>
  <title></title>
    <style type="text/css">
    select
    {
      width: 150px;
    }
  </style>
  <script src="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;
    }

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