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>