效果图
原理
先执行接口获取动态数据,然后在 layer.open的success回调函数中动态添加html代码片段,通过如下方法,将动态生成的代码插入指定的div中,实现动态赋值的效果。
javascript
// 动态获取的数据
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);
}
})
实现
javascript
// 先执行获取数据的接口,然后将结果赋值
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)
}
});