layui使用ajax动态加载二级分类

最新推荐文章于 2024-05-02 20:40:27 发布

牧童牵黄牛

最新推荐文章于 2024-05-02 20:40:27 发布

阅读量688

点赞数

分类专栏： lay-ui 文章标签： php layui ajax

本文链接：https://blog.csdn.net/weixin_41692437/article/details/105391284

版权

lay-ui 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

找了好久的资料才完成，首先，请允许我吐槽一句，很多复制其他人代码的“朋友”，发个博客行，能把代码都复制全了在发表吗！！！

引用某位阅读量破千的博友的话

“代码发一半，**短一半”

先说一下我需要做的效果：第一个select框显示后端返回的一级分类，第二个select框显示ajax动态返回的岁对应的二级分类

如图：

三部分代码

第一部分：html部分

<div class="layui-form-item" style="width:50%;">
    <label class="layui-form-label">所属分类</label>
    <div class="layui-input-block">
         <select name="cat1_id" lay-verify="required" lay-filter="test" id="category">
              {foreach name="goods_category" item="vo"}
                   <option value="{$vo.id}" >{$vo.name}</option>
              {/foreach}
         </select>
         &nbsp;&nbsp;&nbsp;
         <div class="x-body layui-form">
             <select name="cat_id" lay-verify="required" id="cat_id">   
                  <option value="">请选择</option>
             </select>
         </div>
     </div>
</div>

需要注意的是，我第一个select框中，是后端返回的数据，这个不做多的解释，这个普通的模板中都有

ajax返回数据的外部div框，需要添加class属性，layui-form的属性，这个必不可少，不然没效果，name和id都不用多说，和下面对应即可

第二部分，js代码

<script type="text/javascript">
    var form = layui.form();
    form.on('select(test)', function(data){
        console.log(data['value']);
        var value = data['value'];
        $.ajax({
            url: "{:url('admin/goods/return_category')}",
            type: 'GET',
            dataType: 'json',
            data:{id: value},
            contentType: "application/json;charset=utf-8",
            success: function(datas) {
                console.log(datas)
                $("#cat_id").empty();//清空下拉框
                for(var i =0;i<datas.length;i++){
                    $("#cat_id").append("<option value=\""+datas[i].id+"\">"+datas[i].name+"</option>");
                }
                //重新渲染
                form.render("select");
            }
        });

    });

</script>

需要注意的是，可能会报错，提示说form会undefined什么的，可以去看一下版本，1.x和2.x会有差别

后端代码

//ajax根据一级分类显示二级分类的列表
    public function return_category()
    {   
        $id = $_GET['id'];
        $data = Db::name('goods_category')
            ->field('id,name')
            ->where('pid',$id)
            ->select();
        if($data){
            //$return['code'] = 200;
            $return = $data;
        }else{
            //$return['code'] = 300;
            $return = [];
        }
        return json($return);
    }

需要注意是是数据返回的格式，前面ajax遍历的是没有code的，前后数据应该一致。