zoukankan      html  css  js  c++  java
  • 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;
            }

  • 相关阅读:
    NET设计模式 第三部分 结构型模式(7):适配器模式(Adapter Pattern)
    NET设计模式 第二部分 创建型模式(6):创建型模式专题总结(Creational Pattern)
    NET设计模式 第二部分 创建型模式(5):原型模式(Prototype Pattern)
    NET设计模式 第二部分 创建型模式(4):工厂方法模式(Factory Method)
    .NET设计模式 第二部分 创建型模式(3)—建造者模式(Builder Pattern)
    .NET设计模式 第二部分 创建型模式(2)—抽象工厂模式(Abstract Factory)
    .NET设计模式 第二部分 创建型模式(1)—:单件模式(Singleton Pattern)
    .NET设计模式系列文章
    转:Python 列表(list)、字典(dict)、字符串(string)常用基本操作小结
    转:Python字典与集合操作总结
  • 原文地址:https://www.cnblogs.com/zengpeng/p/2750481.html
Copyright © 2011-2022 走看看