AJAX版三级联动(省市区)

Posted 2020-09-21 张鑫4477

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX版三级联动(省市区)相关的知识，希望对你有一定的参考价值。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sanjilandong.aspx.cs" Inherits="sanjilandong" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="JS/jquery-1.7.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <select id="s1"></select>
            <select id="s2"></select>
            <select id="s3"></select>
        </div>
    </form>
</body>
</html>
<script type="text/ecmascript">
    wait("1");
    function wait(a) {
        if (a == "1") {
            $.ajax({
                url: "liandong.ashx",
                data: { "code": "0001" },
                type: "post",
                dataType: "json",
                success: function (m) {
                    $("#s1").text("");
                    for (i in m) {
                        var ss = "<option  value=‘" + m[i].code + "‘>" + m[i].name + "</option>";
                        $("#s1").append(ss);
                    }
                },
                beforeSend: function () { alert(‘数据传输中!‘); },
                error: function () { alert(‘数据错误!‘); },
                complete: function () {
                    alert(‘数据传输完成!‘);
                    wait("2");
                }
            });
        }

        if (a == "2") {
            $.ajax({
                url: "liandong.ashx",
                data: { "code": $("#s1").val() },
                type: "post",
                dataType: "json",
                success: function (m) {
                    $("#s2").text("");
                    for (i in m) {
                        var ss = "<option  value=‘" + m[i].code + "‘>" + m[i].name + "</option>";
                        $("#s2").append(ss);
                    }
                },
                beforeSend: function () { alert(‘数据传输中!‘); },
                error: function () { alert(‘数据错误!‘); },
                complete: function () {
                    alert(‘数据传输完成!‘);
                    wait("3");
                }
            });
        }

        if (a == "3") {
            $.ajax({
                url: "liandong.ashx",
                data: { "code": $("#s2").val() },
                type: "post",
                dataType: "json",
                success: function (m) {
                    $("#s3").text("");
                    for (i in m) {
                        var ss = "<option  value=‘" + m[i].code + "‘>" + m[i].name + "</option>";
                        $("#s3").append(ss);
                    }
                },
                beforeSend: function () { alert(‘数据传输中!‘); },
                error: function () { alert(‘数据错误!‘); },
                complete: function () { alert(‘数据传输完成!‘); }
            });
        }
    }
    $("#s1").change(function () { wait("2"); });
    $("#s2").change(function () { wait("3"); });
</script>

        StringBuilder sb = new StringBuilder();
        sb.Append("[");
        string a = context.Request["code"];
        using (liandongDataContext con = new liandongDataContext())
        {
            int c = 0;
            List<ChinaStates> cs = con.ChinaStates.Where(r => r.ParentAreaCode == a).ToList();
            foreach (ChinaStates cc in cs)
            {
                if (c > 0)
                {
                    sb.Append(",{\"code\":\"" + cc.AreaCode + "\",\"name\":\"" + cc.AreaName + "\"}");
                }
                else
                {
                    sb.Append("{\"code\":\"" + cc.AreaCode + "\",\"name\":\"" + cc.AreaName + "\"}");
                }
                c++;
            }
        }
        sb.Append("]");
        context.Response.Write(sb);
        context.Response.End();

以上是关于AJAX版三级联动(省市区)的主要内容，如果未能解决你的问题，请参考以下文章

Ajax三级联动（省市区）

三级联动省市 ajax的代码

省市区三级联动JS部分简单版