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;
            }

  • 相关阅读:
    JavaScript Design Patterns: Mediator
    Javascript模块化编程系列一: 模块化的驱动
    【329】word 替换文本高级用法
    【327】Python 中 PIL 实现图像缩放
    【326】PIL 截图及图片识别
    【325】python**:selenium
    Android iOS Dribbble风格边栏菜单实现
    Prof UIS相关
    浅谈工作中的几点小心得
    zookeeper与activemq最新存储replicatedLevelDB整合
  • 原文地址:https://www.cnblogs.com/zengpeng/p/2750481.html
Copyright © 2011-2022 走看看