C#使用layui三级联动下拉框

C#使用layui三级联动下拉框框

html前端代码

 <div class="layui-form-item">
                    <label class="layui-form-label">联动选择框:</label>
                    <div class="layui-input-inline">
                        <select name="quiz1" id="quiz1" lay-filter="quiz1" >
                            <option value="">请选择一级</option>
                           
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="quiz2" id="quiz2" lay-filter="quiz2">
                            <option value="">请选择二级</option>
                            
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="quiz3" id="quiz3" lay-filter="quiz3">
                            <option value="">请选择三级</option>
                            
                        </select>
                    </div>
                </div>

Js前端代码

var LevelOne = "";//一级
        var levelTwo = "";//二级
        var levelThree = "";//三级
        //初始化一级下拉框内容
        $.post("/GoodsClassification/queryByParentId", {
    
     "Hierarchy":1 }, function (data) {
    
    
            var data = eval('(' + data + ')');
            if (data.msg != "success") {
    
    
                layer.msg(data.data)
            } else {
    
    
                var $html = "";
                if (data.data != null) {
    
    
                    $.each(data.data, function (index, data) {
    
    
                        if (data.title != "" && data.id != "")
                        {
    
    
                            $html += "<option value='" + data.id + "'>" + data.title + "</option>";
                        }
                        
                    });
                    $("#quiz1").append($html);
                    //append后必须从新渲染
                    form.render('select');
                }
            }

        });

        //监听第一级下拉框
        form.on('select(quiz1)', function (dataObj) {
    
    
            //移除第二级下拉框所有选项
            $("#quiz2").empty();
            var quiz2Html = '<option value="">请选择二级</option>';
            $("#quiz2").html(quiz2Html);
            var quiz3Html = '<option value="">请选择三级</option>';
            $("#quiz3").html(quiz3Html);
            LevelOne = $("#quiz1").find("option:selected").text();
            var value = $("#quiz1").val();
            //异步加载下拉框数据
            $.post("/GoodsClassification/queryByParentId", {
    
     "Hierarchy":2,"Parentid": value }, function (data) {
    
    
                var data = eval('(' + data + ')');
                if (data.msg != "success") {
    
    
                    layer.msg(data.data)
                } else {
    
    
                    var $html = "";
                    if (data.data != null) {
    
    
                        $.each(data.data, function (index, data) {
    
    
                            if (data.title != "" && data.id != "") {
    
    
                                $html += "<option value='" + data.id + "'>" + data.title + "</option>";
                            }
                        });
                        $("#quiz2").append($html);
                        //append后必须从新渲染
                        form.render('select');
                    }
                }

            });

        });

        //监听第二级下拉框
        form.on('select(quiz2)', function (dataObj) {
    
    
            //移除第三级下拉框所有选项
            $("#quiz3").empty();
            var html = '<option value="">请选择三级</option>';
            $("#quiz3").html(html);

            levelTwo = $("#quiz2").find("option:selected").text();
            var value = $("#quiz2").val();
            //异步加载下拉框数据
            $.post("/GoodsClassification/queryByParentId", {
    
     "Hierarchy":3,"Parentid": value }, function (data) {
    
    
                var data = eval('(' + data + ')');
                if (data.msg != "success") {
    
    
                    layer.msg(data.data)
                } else {
    
    
                    var $html = "";
                    if (data.data != null) {
    
    
                        $.each(data.data, function (index, data) {
    
    
                            if (data.title != "" && data.id != "") {
    
    
                                $html += "<option value='" + data.id + "'>" + data.title + "</option>";
                            }
                        });
                        $("#quiz3").append($html);
                        //append后必须从新渲染
                        form.render('select');
                    }
                }

            });

        });
        //监听第三级下拉框
        form.on('select(quiz3)', function (dataObj) {
    
    
            levelThree = $("#quiz3").find("option:selected").text();
        });

C#后端代码

/// <summary>
        /// 返回商品分类三级联动用
        /// </summary>
        /// <param name="Parentid">父类id</param>
        /// <param name="Hierarchy">层次</param>
        /// <returns></returns>
        public string queryByParentId(string Hierarchy="1", string Parentid = "")
        {
    
    
            string strdata = "";
            B_GoodsClassification b_Goods = new B_GoodsClassification();
            List<GoodsClassificationTreeDto> goodsTYPE=b_Goods.queryByParentId(Hierarchy, Parentid);
            if(goodsTYPE.Count>0)
            {
    
    
                strdata = JsonConvert.SerializeObject(goodsTYPE);
            }
            
           if (!string.IsNullOrWhiteSpace(strdata))
            {
    
    
            //GoodsClassificationTreeDto是我这里用到的类型对象。DH_LayuiResponse是定义的一个用于返回的对象
                var resObj = new DH_LayuiResponse<GoodsClassificationTreeDto>()
                {
    
    
                    code = 1,
                    msg = "success",
                    count = goodsTYPE.Count,
                    data = goodsTYPE
                };
                return JsonConvert.SerializeObject(resObj);
            }
            else
            {
    
    
                return "数据初始化失败!";
            }


           
        }



//这里是查询数据的代码，根据你自己的数据库设计和需求修改一下。
		/// <summary>
        /// 品类分析三级下拉
        /// </summary>
        /// <param name="Hierarchy">层次</param>
        /// <param name="Parentid">父级id</param>
        /// <returns></returns>
        public List<GoodsClassificationTreeDto> queryByParentId(string Hierarchy="1", string Parentid="")
        {
    
    
            
            var goodsInfo=(from c in wc.classification_info
             join gc in wc.goods_classification_info
             on c.id.ToString() equals gc.classificationid
             into gc
             from m in gc.DefaultIfEmpty()
             join g in wc.goods_info
             on m.goodsid equals g.goodsid.ToString()
             into g
             from n in g.DefaultIfEmpty()
             where c.is_delete.Equals(0) && c.specification_type == int.Parse(Hierarchy)
             select new GoodsClassificationTreeDto()
             {
    
    
                 title = c.classification_name,
                 id = c.id.ToString(),
                 parentid = c.parentid,
                 specificationType = c.specification_type.HasValue ? c.specification_type.Value : -1,
                 spread = false

             }).Distinct().ToList();
            if (!string.IsNullOrWhiteSpace(Parentid))
            {
    
    
                return goodsInfo.Where(a => a.title!="" && a.parentid.Equals(Parentid)).ToList();
                
            }else
            {
    
    
                return goodsInfo;
            }
              
        }

效果图