码迷,mamicode.com
首页 > Web开发 > 详细

ajax 三级联动

时间:2017-06-07 17:01:21      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:uil   联动   UI   oid   one   script   state   builder   url   

 
 
技术分享
<select class="st" id="st1">
                <option value="null">加载中...</option>
            </select>
            <select class="st" id="st2">
                <option value="null">加载中...</option>
            </select>
            <select class="st" id="st3">
                <option value="null">加载中...</option>
            </select>
3个select
 
 
技术分享
<script type="text/javascript">

    statesload(1);

    function statesload(a) {
        if (a == "1") {
            $.ajax({
                url: "ccc.ashx",
                data: { "pcode": "0001" },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#st1").html(‘‘);
                    for (i in msg) {
                        var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";
                        $("#st1").append(str);
                    }
                    statesload(2);
                },
                beforeSend: function () {
                    $("#st1").html(‘‘);
                    $("#st1").append("<option value=‘null‘>加载中...</option>");
                }
            });
        }
        if (a == "2") {
            $.ajax({
                url: "ccc.ashx",
                data: { "pcode": $("#st1").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#st2").html(‘‘);
                    for (i in msg) {
                        var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";
                        $("#st2").append(str);
                    }
                    statesload(3);
                },
                beforeSend: function () {
                    $("#st2").html(‘‘);
                    $("#st2").append("<option value=‘null‘>加载中...</option>");
                }
            });
        }
        if (a == "3") {
            $.ajax({
                url: "ccc.ashx",
                data: { "pcode": $("#st2").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#st3").html(‘‘);
                    for (i in msg) {
                        var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";
                        $("#st3").append(str);
                    }
                },
                beforeSend: function () {
                    $("#st3").html(‘‘);
                    $("#st3").append("<option value=‘null‘>加载中...</option>");
                }
            });
        }

    }

    $("#st1").change(function () {
        statesload(2);
    });
    $("#st2").change(function () {
        statesload(3);
    });

</script>
jquery

 

后台

技术分享
public void ProcessRequest(HttpContext context)
    {
        System.Threading.Thread.Sleep(2000);
        StringBuilder str = new StringBuilder();
        str.Append("[");
        string s = context.Request["pcode"];
        using (mydbDataContext con = new mydbDataContext())
        {
            int count = 0;
            List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == s).ToList();
            foreach (ChinaStates c in clist)
            {
                if (count > 0) str.Append(",");
                str.Append("{\"code\":\"" + c.AreaCode + "\",\"name\":\"" + c.AreaName + "\"}");
                count++;
            }
        }
        str.Append("]");
        context.Response.Write(str);
        context.Response.End();
    }
View Code

 

ajax 三级联动

标签:uil   联动   UI   oid   one   script   state   builder   url   

原文地址:http://www.cnblogs.com/v587yy/p/6957757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!