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)
        }
    });
相关推荐
会飞的土拨鼠呀5 小时前
Linux负载如何判断服务器的压力
linux·服务器·php
恋猫de小郭5 小时前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架
android·前端·flutter
wordbaby5 小时前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴5 小时前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript
huabuyu5 小时前
在 Taro 小程序中实现完整 Markdown 渲染器的实践
前端
晚星star5 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
huabuyu5 小时前
基于 Taro 的 Markdown AST 渲染器实现
前端
薄雾晚晴5 小时前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript
本末倒置1835 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
狗头大军之江苏分军5 小时前
Meta万人裁员亲历者自述:小扎尝到了降本的甜头
前端·后端·github