基于layui的select多级关联选择Ajax版级联选择

很多网站的分类不是1级的，可能是2级或者3级，级联选择进行分类就尤为重要，这里我基于layui实现了一款级联选择器，方法比较笨拙，但是理解起来比较简单，相信入门级别的同学都能看懂，下面直接上教程了

基于layui的select多级关联选择Ajax版级联选择

1：部署id选择器如下 html部分

<div class="layui-input-inline">
    <div id="cate1"></div>
</div>
<div class="layui-input-inline">
    <div id="cate2"></div>
</div>

我的是2级联动，所有我部署了2层id选择器，同学们根据自己的需要进行部署

2：js部分

layui.use('form', function(){
    var form = layui.form;
    //文章提交保存
    form.on('submit(info)', function(data){
        var url = "{:url('article/save')}";
        $.post(url,data.field,function (e) {
            if(e.code ==200){
                success(e.msg);
                setTimeout("location.reload()",2000);
            }else {
                error(e.msg);
            }
        })
        return false;
    });
    //ajax获取分类数据
    function getCate(pid,name,id){
        var url = "{:url('article/get_cate')}";
        $.post(url,{pid:pid},function (e) {
            //console.log(e)
            var html="";
            var data = e.data;
            html += '<select name="cate_id" id="'+name+'_id" lay-filter="'+id+'" lay-verify="required">';
            html += '<option value="">请选择</option>';
            for (var i = 0;i<data.length;i++){
                html += "<option  value='"+data[i].id+"'>"+data[i].name+"</option>";
            }
            if(data.length > 0){
                $("#"+id).html(html);
            }else {
                $("#"+id).children().remove();
            }
            html += '</select>';
            form.render();
        })
    };
    getCate(0,'cate_id','cate1');
    //目前系统无三级分类，故二级即可实现需求
    form.on('select(cate1)', function(data){
        //console.log(data.elem); //得到select原始DOM对象
        //console.log(data.value); //得到被选中的值
        //console.log(data.othis); //得到美化后的DOM对象
        getCate(data.value,"cate_id",'cate2')
    });
});

说明： form.on(‘select(cate1)’函数

其中方法针对 form.on(‘select(cate1)’
由于我是2级联动，故只组要一次 词函数 其中 cate1 代表步骤1第二个中id值，即：获得值后，需要将组装完成的html，append到ID为cate1的html元素中
以此类推，如果您是3级联动则需要2个form.on(‘select(cate1)’函数

说明： getCate(pid,name,id)函数

pid当前要请求的pid值，如我页面中初始加载这pid为0，加载第二层则传递第二层的id值
name 我们需要传递给后端的name属性，我的胃分类id 即：cate_id
id当获取到值后，将组合好的html，append到对应的id下组成下拉选择框select

结语：本教程可能真正使用到的人员不是很多，但是希望对有需要的人起到帮助作用。