thinkphp5实现弹出框(下拉框选项动态赋值)

效果图

原理

先执行接口获取动态数据,然后在 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)
        }
    });
相关推荐
脑袋大大的19 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0128 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
Shartin2 小时前
Can201-Introduction to Networking: Application Layer应用层
服务器·开发语言·php
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js