layui的下拉框的级联实现

layui的下拉框级联解决代码如下:

<div class="layui-form toolbar">
    <div class="layui-inline">
        <label class="layui-form-label">一级分类</label>
        <div class="layui-input-block">
            <select name="status" lay-filter="parentCategory" id="parentCategory">
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">二级分类</label>
        <div class="layui-input-block">
            <select name="status" id="subCategory">
            </select>
        </div>
    </div>
</div>

核心js代码

layui.use(['layer', 'form','jquery'], function () {
    var $= layui.jquery;
    //如果有加载页面就渲染第一个一级分类的话 就先调用一次方法
    renderSelect($('#partentCategory')[0]);
    
    //监听一级分类下拉框变化
    form.on('select(parentCategory)',function(res){
       //变化就渲染第二个分类   把第一个下拉框的value传递
        renderSelect($('#subCategory')[0],res.value);
    });
    
    function renderSelect(ele,id){
        //先判断id是否有值,这里是为了第一个下拉框改变值的时候 好把第二个下拉框的选项都删掉
        if(id){
            ele.length=0;
        }
        //这里应该调用后端接口 返回该有的数据，不同的后端语言不通，我就不写出来了，直接伪数据
        var data=[{name:'显示的值',id:'作为option的value'},{name:'显示的值',id:'作为option的值'}];
        data.forEach((item,index)=>{
           var option =new Option(item.name,item.id); 
            ele.append(option);
        });
        //渲染一下表单
        form.render();
    }
});