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

<head>
    <title></title>
    <script src="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 op = "";
                    for (var i = 0; i < result.d.length; i++) {
                        op += '<option value=' + result.d[i].provinceID + '>';
                        op += result.d[i].provincename;
                        op += '</option>';
                    }
                    $("#seprovince").append(op);
                }
            })

、、、、、、、、、、、当省份发生改变时，城市改变、、、、、、、、、、、、、、、、、
            $('#seprovince').change(function () {

$('#secity option:gt(0)').remove();
                $('#searea option:gt(0)').remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetCity",
                    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 () {
             $.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>
省
    ：<select id="seprovince">
        <option>--请选择--</option></select>
        市：<select  id="secity">
        <option>--请选择--</option></select>
    县：<select id="searea">
        <option>--请选择--</option>
    </select>
</body>
</html>

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

///WebService1页面代码///

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

public List<Model.province> GetListModel()
        {
            return dal.GetListModel();
        }

//城市对应的BLL层代码

public List<Model.city> GetListModel(string pcity)
        {
            return dal.GetListModel(pcity);
        }

县对应的BLL层代码

public List<Model.area> GetListModel(string strsql)
        {
            return dal.GetListModel(strsql);
        }

省份对应的DAL层代码

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

这里是最后的效果图：

转载于:https://www.cnblogs.com/zxw0004/p/5059856.html

无刷新三级联动（ajax）(转)相关推荐

  1. 轻松实现无刷新三级联动菜单[VS2005与AjaxPro]

    最近做一些网站程序,经常要用到多个下拉菜单选择,看了介绍开始用AjaxPro这个控件,感觉效果不错.以前使用过MagicAjax,很久不用了忘记了,最麻烦的就是在虚拟目录的时候比较麻烦,呵呵,在网上也 ...

  2. ajaxpro post html,轻松实现无刷新三级联动菜单[vs2005与ajaxpro]_ajax教程

    最近做一些网站程序,经常要用到多个下拉菜单选择,看了介绍开始用AjaxPro这个控件,感觉效果不错.以前使用过MagicAjax,很久不用了忘记了,最麻烦的就是在虚拟目录的时候比较麻烦,呵呵,在网上也 ...

  3. Ajax实现无刷新三联动下拉框

    1.html代码 <HTML>     <HEAD>         <title>Ajax实现无刷新三联动下拉框</title>         &l ...

  4. addoption php,无忧建站-ajax+php无刷新二级联动下拉菜单(省市联动)源码

    /** * ajax无刷新二级联动下拉菜单(省市联动) * * @author      arcow * @version     1.0 * @lastupdate  2005-12-29 * */ ...

  5. 全国省市县无刷新多级联动菜单

    全国省市县无刷新多级联动菜单 <html> <head> <title>省市县关联菜单</title> <meta http-equiv=&quo ...

  6. 实现无刷新DropDownList联动效果

    在做一个文章添加功能时,想在选择大类后,自动将其所属二级小类显示出来,使用DropDownList的SelectedIndexChanged事件可以很容易实现,但每次选择后页面总要刷新一次,让人感觉很 ...

  7. SpringBoot 全国省市区三级联动 Ajax动态绑定select

    SpringBoot 全国省市区三级联动 Ajax动态绑定select 文章目录 前言 一.三级联动? 二.分析与编码 1.数据库 2.SQL 3.编写Controller 4.Ajax动态绑定sel ...

  8. java dropdownlist_实现无刷新DropDownList联动效果

    在做一个文章添加功能时,想在选择大类后,自动将其所属二级小类显示出来,使用DropDownList的JavaScript 在做一个文章添加功能时,想在选择大类后,自动将其所属二级小类显示出来,使用Dr ...

  9. 实现DropDownList 无刷新的联动效果

    如图: 1.引用ajax.dll http://www.cnblogs.com/ou444/admin/Files.aspx 2.Web.config <httpHandlers>     ...

最新文章

  1. 机器人建模中移动关节如何建立坐标系_机器人工程师进阶之路（八）指数积（PoE）建立机械臂模型及正运动...
  2. 2020年国际学术会议参考列表
  3. 酷派奖励程序员10 万股期权！因代码贡献受 Linux 之父亲自点名赞赏
  4. SQL 从一个表读取数据存到另一个表
  5. 双面黄琳：世界顶级女黑客，两个孩子的迟钝妈妈
  6. Exp1 PC平台逆向破解 20164309 欧阳彧骁
  7. .net中的mapinfo开发：准备（一）
  8. ffmpeg.exe dos下怎么用 放在哪里
  9. mysql调用短信接口_短信平台接口调用方法参考
  10. T-sne可视化digits
  11. rpm-tree源码分析一波
  12. 计算机工程说课稿,人教版数学说课稿集合五篇
  13. 一个简单的用户注册JavaBean
  14. 正阅读微信小说分销系统-视频教程-4.数据统计 包含图文教程
  15. 09.mtk背光流程
  16. Rmarkdown使用rvest包实现对静态网页数据抓取
  17. POJ 3295 Tautology （模拟法，栈的使用）
  18. HDU6069(区间筛）
  19. Imatest图像处理软件 Imatest Master
  20. 【AUTOSAR】【以太网】Eth驱动

热门文章

  1. linux生产者进程数为3个,linux 多线程面试题_linux 进程线程_linux 线程 进程(3)
  2. 什么叫显示动力学_通过流体动力学研究找到制作煎饼的最佳方法
  3. Spring源码解析 -- SpringWeb请求参数获取解析
  4. 暗影精灵5学计算机够用吗,为什么说暗影精灵5值得买？拆客给你看本！
  5. android屏幕亮度测试,屏幕亮度与可视角度测试_手机Android频道-中关村在线
  6. php设计模式 命令行模式,[设计模式]PHP设计模式之命令行模式
  7. wait与notify
  8. SQL执行计划错误导致临时表空间不足
  9. javaSE----进制
  10. java数组r.id_Android HelloViews Spinner教程R.id和R.array无法解析