效果图
原理
先执行接口获取动态数据,然后在 layer.open的success回调函数中动态添加html代码片段,通过如下方法,将动态生成的代码插入指定的div中,实现动态赋值的效果。
// 动态获取的数据
var data = ......;// 弹出框配置
layer.open({// 弹出层加载成功后的回调函数success: function(layero, index) {var html_string;// for循环添加代码for(var i = 0, len = data.length; i < len; i++) {var option = ......;html_string += option;}// 将动态获取的下拉框数据,插入到弹出层的指定div内容中// div的id html代码字符串$('#div-id').html(html_string);}
})
实现
// 先执行获取数据的接口,然后将结果赋值
var data = res.data;// 设置layer.open弹出框的配置
var change_modal = layer.open({// 标题title:'更改为转账到银行卡方式',// 内容(你也可以写个html文件,嵌入就好,我懒,就直接写进入了)content: '<form>' +'<div>' +' <label>开户行</label>' +' <div><input type="text" id="bank_name" placeholder="请输入开户行"></div>' +'</div>' +'<div>' +' <label>持卡人</label>' +' <div><input type="text" id="bank_user" placeholder="请输入持卡人"></div>' +'</div>' +'<div>' +' <label>卡号</label>' +' <div><input type="text" id="bank_no" placeholder="请输入卡号"></div>' +'</div>' +'<div>' +' <label>退款餐厅</label>' +' <div id="defct-div"></div>' +'</div>' +'</form>',// 按钮集合btn: ['确定提交'],// 弹出层加载成功后的回调函数(关键!!!)success: function(layero, index) {var html = '<select id="defct"><option value="">请选择</option>';// for循环生成html片段for(var i = 0, len = defctList.length; i < len; i++) {var option = '<option value="' + defctList[i].id + '">' + defctList[i].name + '</option>';html += option;}html += '</select>';// 将下拉框数据插入到弹出层的内容中(核心关键代码!!!!)$('#defct-div').html(html);},// 第一个按钮的点击事件btn1:function(){// 实现加载效果var loading = layer.load()// 结束加载效果layer.close(loading)// 弹出提示信息layer.msg(data.msg)// 关闭本弹出框layer.close(change_modal)}});