ajax 三级联动

分类: IT文章 • 2022-07-15 00:13:20

<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 三级联动

相关推荐