zoukankan      html  css  js  c++  java
  • 不限级别联动

    不限级别的联动,下边来看看代码的实现,先看看效果吧

    只要点击下拉框的值,如果查询出下级还有内容则还会追加一个下拉框,这是一个简单的功能,看看代码吧

    html

    1 <div class="col-md-4">
    2    @Html.DropDownList("infoSectionId", ViewData["InfoSectionFather"] as SelectList,"---请选择")
    3    <span id="spanChild"></span>
    4    </div>

    js代码

      $(document).ready(function() {
    //当点击第一个下拉框时
                $("#infoSectionId").change(function () {
    var selsecid = $(this).find("option:selected").val(); GetChildRen(selsecid, "spanChild"); $("#ChangeInfoSectionHidden").val(selsecid); }); $("#spanChild").on("change", ".childselectshowlist", function (event) { var selsecid = $(this).find("option:selected").val(); var selectText = $(this).find("option:selected").html(); getChildRecTwo(selsecid, "spanChild", $("#spanChild select").index(this)); $("#ChangeInfoSectionHidden").val(selsecid);//得到点击后的值 }); });
    /// <summary>得到子级</summary>
            function GetChildRen(secid, domMainContain) {
                var selectpar = $("#" + domMainContain);
                selectpar.html("");
                if (secid == null || secid == -1) {
                    return;
                }
                selectpar.append("<img src='/Content/Images/loading4.gif' id='childclassloadimgimg' />");
                $.post("/InfoSection/GetChild?q=" + new Date().getTime(), {
                    'id': secid
                }, function(data) {
                    //  alert(eval(data));
                    $("#childclassloadimgimg").remove();
                    if (eval(data).length > 0) {
                        var timeid = "classshowlist" + new Date().getTime();
                        selectpar.append('<select id="' + timeid + '" class="childselectshowlist" style="margin:0px 0px 0px 10px;"></select>');
                        selectpar.find("#" + timeid).append("<option value='-1' >请选择</option>");
                        $.each(eval(data), function(i, val) {
                            selectpar.find("#" + timeid).append("<option value='" + val.id + "'>" + val.name + "</option>");
                        });
                    }
                }, 'json');
            };

    Controller控制器代码

      [AuthorizationCodeAttribute]
            [Description("查询分类目录")]
            [HttpPost]
            public ActionResult GetChild()
            {
                string strId = Request.Params["id"];
                List<Hashtable> hashSectionList = new List<Hashtable>();
                int id = 0;
                int.TryParse(strId, out id);
                if (id > 0)
                {
                    InfoSectionOperator dal = new InfoSectionOperator();
                    IList<InfoSection> ilList = dal.GetList(string.Format("ParentId={0}", id));
                    if (ilList.Count > 0)
                    {
                        hashSectionList.AddRange(ilList.Select(FormtSimpData));
                    }
                }
                return Json(hashSectionList, JsonRequestBehavior.AllowGet);
            }
     
  • 相关阅读:
    leetcode hot 100- 84. 柱状图中最大的矩形
    leetcode hot 100- 221. 最大正方形
    leetcode hot 100-34. 在排序数组中查找元素的第一个和最后一个位置
    leetcode hot 100-剑指 Offer 37. 序列化二叉树
    leetcode hot 100-2. 两数相加
    leetcode hot 100-33. 搜索旋转排序数组
    leetcode hot 100- 98. 验证二叉搜索树
    leetcode hot 100-152. 乘积最大子数组
    leetcode hot 100-19. 删除链表的倒数第N个节点
    v-modal的使用。
  • 原文地址:https://www.cnblogs.com/llxy/p/3881320.html
Copyright © 2011-2022 走看看