首页 > 代码库 > ajax 三级联动

ajax 三级联动

 
 
技术分享
<select class="st" id="st1">
                <option value=http://www.mamicode.com/"null">加载中...</option>
            </select>
            <select class="st" id="st2">
                <option value=http://www.mamicode.com/"null">加载中...</option>
            </select>
            <select class="st" id="st3">
                <option value=http://www.mamicode.com/"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=http://www.mamicode.com/‘" + msg[i].code + "‘>" + msg[i].name + "</option>";
                        $("#st1").append(str);
                    }
                    statesload(2);
                },
                beforeSend: function () {
                    $("#st1").html(‘‘);
                    $("#st1").append("<option value=http://www.mamicode.com/‘null‘>加载中...");
                }
            });
        }
        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=http://www.mamicode.com/‘" + msg[i].code + "‘>" + msg[i].name + "</option>";
                        $("#st2").append(str);
                    }
                    statesload(3);
                },
                beforeSend: function () {
                    $("#st2").html(‘‘);
                    $("#st2").append("<option value=http://www.mamicode.com/‘null‘>加载中...");
                }
            });
        }
        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=http://www.mamicode.com/‘" + msg[i].code + "‘>" + msg[i].name + "</option>";
                        $("#st3").append(str);
                    }
                },
                beforeSend: function () {
                    $("#st3").html(‘‘);
                    $("#st3").append("<option value=http://www.mamicode.com/‘null‘>加载中...");
                }
            });
        }

    }

    $("#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 三级联动