layui中select实现多选的级联选择,当数据多的时候页面渲染慢

问题: 使用layui中form实现多选的select级联选择效果,在select中被选中的元素多的时候,前端渲染的效果很慢!!!

　　　　代码:

　　　　

form.on('select(第一个select)', function (data) { // 打开控制台查看效果
     var itemStr = data.value.toString();
　　　$('#第二个selectId').val(itemStr );
　　　...//此处省略根据第二个selected的数据获取第三个select中被选中的select的代码
　　　$('#第三个selectId').val(itemStr );
　　　form.render();
})

 

　　　　                                  

 

 

 

 　　　　选中第二条数据最少要等三秒才能完成前端的渲染

解决办法:(感觉这种方法是最笨的,但也还没有找到更好的,有更好的办法希望交流)

　　　　使用原生渲染,改完后很流畅!!!!

　　　　代码:

form.on('select(第一个select)', function (data) {
　　var selected = [];
　　...// 此处省略从后台获取selected的代码
　　// 获取第二个select中所有option(layui修改框架中使用dd来代替option)
　　var Ele = $('#第二个select的Id').next('.layui-form-select').find('dd');
　　// 循环所有option找到被选中的option给其添加是哪个被选中的类名(layui修改框架中规定的被选中类名为:layui-form-checked)
　　for(var j = 0; j < Ele.length; j ++) {
    　　var currentVal = Ele.eq(j).attr('lay-value');
    　　if(selected.indexOf(currentVal) > -1) {
        　　Ele.eq(j).find('div').addClass('layui-form-checked');
    　　}
　　}
　　// 清空上一次显示在select框中的值(layui修改框架中将被选中值放在.multiSelect元素中显示,i为规定的图标)
　　$('#第二个selectId').next('.layui-form-select').find('.multiSelect').html('<i class="layui-edge"></i>');
　　// 循环所有被选中的值插入其中(插入格式也要符合原有框架)
　　for(var k = 0; k < selected.length; k ++) {
    　　var selectedOption = $('<a href="javascript:;"><span lay-value="' + selected[k] + '"> ' + selected[k] + ' </span><i></i></a>');
    　　$('第二个selectId').next('.layui-form-select').find('.multiSelect').append(selectedOption);
    }
    ...//此处省略第三个select的渲染代码
})

 

layui实现多选:  https://yelog.org/layui-select-multiple/