码迷,mamicode.com
首页 > 其他好文 > 详细

不限级别联动

时间:2014-07-31 20:29:27      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   os   io   for   

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

bubuko.com,布布扣

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

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

 

 

 

bubuko.com,布布扣
 
bubuko.com,布布扣

不限级别联动,布布扣,bubuko.com

不限级别联动

标签:des   style   blog   http   color   os   io   for   

原文地址:http://www.cnblogs.com/llxy/p/3881320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!