select下拉框option元素Ajax动态添加渲染无效

提问 未结 3 264
政丶邪
政丶邪 2019-10-8
悬赏:20飞吻
版本:layui 浏览器:
layui.use(['jquery', 'table', 'form', 'element'], function () {
var element = layui.element;
var $ = layui.jquery;
var table = layui.table;
var form = layui.form;
//在这里插入不用渲染都能显示
$('#delivery_name').find('select').append("<option>abcc</option>");
//动态加载下拉框选项
initOption()
function initOption() {
$.ajax({
type: "post",
url: '/delivery/getAllDelivery',
success: function (data) {
$.each(data, function(index, item) {
var option=$("<option>wocao nimas,enfo<option/>");
option.val(item.id)
option.html(item.delivery_name)
console.log($('#delivery_name').find('select').append(option));
// $('#delivery_name').find('select').append("<option value="+item.id+">"+item.delivery_name+"</option>");
//alert(item.id)

form.render()
})
element.init();
form.render();

},
error: function (error) {
layer.msg("操作失效", {
icon: 7
})
}
});
}
});

</script>


页面加载完毕F12看页面代码,option元素都已动态添加完毕但就是不显示
回帖
  • 云中客
    2019-10-9
    js执行ajax是按书写时的顺序执行,由于你ajax采用的是异步,在拼接select还没有完成的时候就已经执行完了剩余js代码,所以不生效,需将同步改为异步
    0 回复
  • 政丶邪
    2019-10-9
    我是在ajax中的SUCCESS回调函数中进行渲染的啊...
    不过改成同步执行确实OK了

    之前Ajax没有同步的时候我用console.log($('#delivery_name').find('select').append("<option value="+item.id+">"+item.delivery_name+"</option>"))在页面控制台打印的时候,报的错误信息是:layui.js:25 Layui hint: 不支持的[object Object]表单渲染

    多谢
    0 回复
  • 看看这个能解决您问他不?
    https://gitee.com/kkk12/dashboard
    0 回复