jquery 三级联动

 function refreshAreaInfo() {
        var provinceId = $("#DropDownListProvince").val();
        $.ajax({
            type: "get",
            contentType: "application/json;utf-8",
            url: "AjaxForm.aspx?id=" + provinceId,  //这里是要传递的参数,格式为data:"{paraName:paraValue}"
            dataType: "json",
            success: function(result) {
                $("#DropDownListOther").hide();
                $("#DropDownListCity").children().remove();
                var str = "<option value='-1'>请选择</option>";
                $("#DropDownListCity").append(str);
                for (var i = 0; i < result.length; i++) {
                    var option = "<option value='" + result[i].Id + "'>" + result[i].AreaName + "</option>";
                    $("#DropDownListCity").append(option);
                }
            },
            error: function(msg) {
                alert(msg);
            }
        });
    }

    function GetCityArea() {
        var id = $("#DropDownListCity").val();
        $.ajax({
            type: "post",
            contentType: "application/json;utf-8",
            url: "AjaxForm.aspx/RefreshAreaInfo",  //这里是要传递的参数,格式为data:"{paraName:paraValue}"
            data: "{id:" + id + "}",
            dataType: "json",
            success: function(result) {
                $("#DropDownListOther").show();
                $("#DropDownListOther").children().remove();
                var str = "<option value='-1'>请选择</option>";
                $("#DropDownListOther").append(str);
                result = $.parseJSON(result.d);
                for (var i = 0; i < result.length; i++) {
                    var option = "<option value='" + result[i].Id + "'>" + result[i].AreaName + "</option>";
                    $("#DropDownListOther").append(option);
                }
            },
            error: function(msg) {
                alert(msg);
            }
        });
    }

<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownListProvince" runat="server" onchange="refreshAreaInfo()">
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownListCity" runat="server" onchange="GetCityArea()" Width="120">
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownListOther" runat="server">
        </asp:DropDownList>
    </div>
    </form>
</body>

Ajax后台:

 protected void Page_Load(object sender, EventArgs e)
        {
            string provinceId = Request["id"].ToString();
            string data = GetAreaInfo(int.Parse(provinceId));
            Response.Write(data);
            Response.End();
        }

        private static string GetAreaInfo(int id)
        {
            AreaInfoDataClassesDataContext dataContext = new AreaInfoDataClassesDataContext();
            var result = from c in dataContext.AreaInfo
                         where c.parentId == id
                         select new { c.id, c.areaName };
            JavaScriptSerializer Serializer = new JavaScriptSerializer();
            string data = Serializer.Serialize(result);
            return data;
        }

        [WebMethod]
        private static string refreshAreaInfo(int id)
        {
            string data = GetAreaInfo(id);
            return data;
        }

原文地址:https://www.cnblogs.com/zengpeng/p/2750481.html