• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 ListModel.province> GetProvince()
      {
       BLL.province bpro = new BLL.province();
       ListModel.province> list = bpro.GetListModel();
       return list;
      }
      [WebMethod]
      public ListModel.city> GetCItyByPro(string proid)
      {
       BLL.city bcity = new BLL.city();
       ListModel.city> list = bcity.GetListModel("father='" + proid + "'");
       return list;
      }
      [WebMethod]
      public ListModel.area> GetAreaByCity(string cityid)
      {
       BLL.area barea = new BLL.area();
       ListModel.area> list = barea.GetListModel("father='" + cityid + "'");
       return list;
      }
     }
    }
    

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

    //city.cs:
     public ListModel.city> GetListModel(string strsql)
      {
       return dal.GetListModel(strsql);
      }
    //area.cs:
      public ListModel.area> GetListModel(string strsql)
      {
       return dal.GetListModel(strsql);
      }
    

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

    //city.cs:
    public System.Collections.Generic.ListModel.city> GetListModel(string strsql)
      {
       System.Collections.Generic.ListModel.city> list = new System.Collections.Generic.ListModel.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.ListModel.area> GetListModel(string strsql)
      {
       DataTable dt = GetList(strsql).Tables[0];
       System.Collections.Generic.ListModel.area> list = new System.Collections.Generic.ListModel.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;
      }

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

    您可能感兴趣的文章:
    • PHP+Mysql+Ajax+JS实现省市区三级联动
    • AJAX省市区三级联动下拉菜单(java版)
    • ajax三级联动下拉菜单效果
    • ajax三级联动的实现方法
    • ajax实现三级联动的基本方法
    • Ajax商品分类三级联动的简单实现(案例)
    • Ajax+php实现商品分类三级联动
    • ajax实现省市三级联动效果
    • 简单实现ajax三级联动效果
    • AJAX实现省市县三级联动效果
    上一篇:Ajax验证用户的唯一性
    下一篇:ajax无刷新分页的简单实现
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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