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/