Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决

1.背景
前段使用Layui框架，jQuery动态设置的下拉框select标签，加载时而正常时而失效。
本地调试完全没有问题，但是在服务器运行加载成功和失败的比例五五开。

2.解决
问题原因：Layui的form美化修饰和jQuery的select方法发生冲突，受渲染速度不同影响，最终的select异步加载成功与否也会不同。
解决方法：在使用jquery异步加载完成之后，调用Layui的重新渲染方法，对页面重新渲染

如下：

<script type="text/javascript">
    $(function() {
        init();
    })
    //页面初始化
    function init() {
        $.ajax({
            type: "post",
            url: "http://...",
            timeout : 30000,
            success: function(result) {
                var select = $("select[name=siteId]");
                var site = ${house.siteId}
                    $.each(result.data, function(index, element) {
                        var option = $("<option value='"+element.id+"'>"+
                            element.name+"</option>");
                        select.append(option);	
                        if(site == element.id){
                            option.prop("selected",true)
                        }
                    })
            },
            error: function() {},
            async: false
        });
        //添加下面的代码，重新渲染，可以有效避免加载失效问题
        layui.use('form', function(){
            var form = layui.form;
            form.render();
        });
    }
</script>

3.总结：
ajax改成同步请求！！！！！然后form.render()ajax改成同步请求！！！！！然后form.render()

转自