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)
        }
    });
相关推荐
生椰拿铁You5 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生16 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap31 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
hopetomorrow33 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
loooseFish39 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
网络安全-杰克40 分钟前
网络安全概论
网络·web安全·php
不是二师兄的八戒42 分钟前
本地 PHP 和 Java 开发环境 Docker 化与配置开机自启
java·docker·php
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端