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

  • 相关阅读:
    H5系列之drag拖放
    H5系列之contenteditable
    H5系列之新input
    利用css3和js实现旋转木马图片小demo
    利用css3实现照片列表展开小demo
    reduce()、filter()、map()、some()、every()、...展开属性
    ES6,ES7,ES8,ES9,ES10新特性
    Web Components 是什么?它为什么对我们这么重要?
    vscode常用快捷键以及插件
    使用for..in时会遍历对象原型中的自定义属性
  • 原文地址:https://www.cnblogs.com/zengpeng/p/2750481.html
Copyright © 2011-2022 走看看