layui的二级联动

layui的二级联动

至少你要引入layui的公共资源
$type1为后端传给前端的数据

下面分享layui二级联动HTML代码

    题目分类：
    

        
            选择题目分类
            @foreach($type1 as $v)
                {{ $v->name }}
            @endforeach
        
    
    

        
            选择一级分类
        
    

搜索

下面分享二级联动代码

 layui.use(['form'], function(){
    var form = layui.form;

        form.on('select(type1)', function(data){
            var type_id = data.elem.value;
            // console.log(type_id)
            $.ajax({
                type: 'POST',
                url: "/question/select",
                data: {type_id:type_id},
                dataType:  'json',
                success:function(e){
                    // console.log(e);
                    if (e.errno == 0)  {
                        //empty() 方法从被选元素移除所有内容
                        $("select[name='type2']").empty();
                        var html = "选择二级分类";
                        $(e.data).each(function (v, k) {
                            html += "" + k.name + "";
                        });
                        //把遍历的数据放到select表里面
                        $("select[name='type2']").append(html);
                        //从新刷新了一下下拉框
                        form.render('select');      //重新渲染
                    } else {
                        layer.alert(data.msg);
                    }

                },
                error: function () {
                    layer.alert('出错了！');
                }
            });
        });
  });