• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

2017-6-6ASP.NETAjax版页面无刷新三级联动

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

实现效果:

页面代码:

<div>
        <select id="sel1" style="width:100px;">
            
        </select>
        <select id="sel2" style="width:100px;">
           
        </select>
        <select id="sel3" style="width:100px;">
            
        </select>
    </div>

Js代码:

 change(1);

    function change(a)
    {
       
        if (a == "1")
        {
            $.ajax({
                url: "select.ashx",
                data: { "code": "0001" },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#sel1").html("");
                    for (i in msg)
                    {
                      
                        var str = "<option value='" + msg[i].code + "'>" + msg[i].name + "</option>";
                        $("#sel1").append(str);
                    }
                    change(2);
                },
                error:function()
                {
                    alert("aaa");
                },
                beforeSend: function () {
                    $("#sel1").html("");
                    var str = "<option value='null'>数据正在加载...</option>";
                    $("#sel1").append(str);
                }

            });
        }
        if (a == "2") {
            $.ajax({
                url: "select.ashx",
                data: { "code": $("#sel1").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#sel2").html("");
                    for (i in msg) {
                        
                        var str = "<option value='" + msg[i].code + "'>" + msg[i].name + "</option>";
                        $("#sel2").append(str);
                    }
                    change(3);
                },
                //如果弹窗跳出,代表服务端路径错误,服务端出错,服务端没有返回指定的json数据格式
                error: function () {
                    alert("aaa");
                },
                //请求服务端的时候执行(不管对错)一开始加载数据就会执行
                beforeSend: function () {
                    $("#sel2").html("");
                    var str = "<option value='null'>数据正在加载...</option>";
                    $("#sel2").append(str);
                },
                //处理完毕之后,不管返回到sussess还是error中   数据加载完毕执行
                complete:function(){
                
                }

            });


        }
        if (a == "3") {
            $.ajax({
                url: "select.ashx",
                data: { "code": $("#sel2").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#sel3").html("");
                    for (i in msg) {
                       
                        var str = "<option value='" + msg[i].code + "'>" + msg[i].name + "</option>";
                        $("#sel3").append(str);
                    }
                },
                error: function () {
                   
                },
                beforeSend: function () {
                    $("#sel3").html("");
                    var str = "<option value='null'>数据正在加载...</option>";
                    $("#sel3").append(str);
                }

            });
        }

    }

    $("#sel1").change(function () {
        change(2);
    });

    $("#sel2").change(function () {
        change(3);
    });
三级联动Js代码

一般处理程序代码:

using (cityDataClassesDataContext con = new cityDataClassesDataContext()) 
        {
            StringBuilder str = new StringBuilder();
            str.Append("[");
            string aa = context.Request["code"];
            int count = 0;
            List<ChinaStates> clist = con.ChinaStates.Where(r=>r.ParentAreaCode == aa).ToList();
            foreach(ChinaStates ch in clist )
            {
                if (count > 0) { str.Append(","); }
                str.Append( "{\"name\":\""+ch.AreaName+"\",\"code\":\""+ch.AreaCode+"\"}");
                count++;
            }

            str.Append("]");

            context.Response.Write(str);
            context.Response.End();
        }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
源码的说明ASP.NETMVC5框架揭秘.zip发布时间:2022-07-10
下一篇:
asp.net大数据导出execl实现分开压缩并下载发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap