【2017-6-7】AJAX异步刷新 省市区 三级联动

这里调用的是jquery1.7.1

需要数据库的支持

下面具体看代码

前面界面只需要三个下拉列表就OK

<form id="form1" runat="server">
        <div>
            <select id="st1">
                <option value="null">加载中...</option>
            </select>
            <select id="st2">
                <option value="null">加载中...</option>
            </select>
            <select id="st3">
                <option value="null">加载中...</option>
            </select>
        </div>
    </form>

LINQ to SQL类

一般处理程序

public void ProcessRequest(HttpContext context)
    {
        StringBuilder str = new StringBuilder();
        str.Append("[");
        string s = context.Request["ccode"];
        using (ChinaStatesDataContext con = new ChinaStatesDataContext())
        {
            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();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

外部JS代码，一定记得引用

insert("1");

    function insert(a) {
        if (a == "1") {
            $.ajax({
                url:"Handler.ashx",
                data: {"ccode":"0001"},
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#st1").empty();
                    for(m in msg)
                    {
                        var str = "<option value='" + msg[m].code + "'>" + msg[m].name + "</option>";
                        $("#st1").append(str);
                    }
                },
                error: function () {
                    alert("a");
                },
                beforeSend: function () {
                    $("#st1").html('');
                    $("#st1").append("<option value='null'>加载中...</option>");
                },
                complete: function () {
                    insert("2");
                }
            });
        }
        if (a == "2") {
            $.ajax({
                url: "Handler.ashx",
                data: { "ccode": $("#st1").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#st2").empty();
                    for (m in msg) {
                        var str = "<option value='" + msg[m].code + "'>" + msg[m].name + "</option>";
                        $("#st2").append(str);
                    }
                },
                error: function () {
                    alert("aa");
                },
                beforeSend: function () {
                    $("#st2").append("<option value='null'>加载中...</option>");
                },
                complete: function () {
                    insert("3");
                }
            });
        }
        if (a == "3") {
            $.ajax({
                url: "Handler.ashx",
                data: { "ccode": $("#st2").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#st3").empty();
                    for (m in msg) {
                        var str = "<option value='" + msg[m].code + "'>" + msg[m].name + "</option>";
                        $("#st3").append(str);
                    }
                },
                error: function () {
                    alert("aaa");
                },
                beforeSend: function () {
                    $("#st3").append("<option value='null'>加载中...</option>");
                },

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