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

news2024/9/22 7:26:25

效果图

原理

先执行接口获取动态数据,然后在 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)
        }
    });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2054459.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Win10关闭弹出提示-‘密码已过期需要更换’

运行—>lusrmgr.msc—>本地用户和组—>用户—>右侧要设置的用户名—>属性—>勾选‘密码永不过期’

laravel使用SSH 隧道连接远程数据库

1、创建SSH隧道 // An highlighted blockssh -i ./id_rsa -N -L 3306:localhost:3306 -p 8848 root192.161.1.1对上述代码的 解释。 命令是一个SSH隧道命令&#xff0c;用于将本地端口3306转发到远程服务器上的3306端口。以下是命令的详细解释&#xff1a;ssh: 调用SSH客户端…

AI工作流:低代码时代的革新者,重塑手机问答类应用生态

在这个数字化迅猛发展的时代&#xff0c;低代码技术正以惊人的速度改变着我们的生活方式。作为低代码人群的先锋&#xff0c;AI工作流技术正在以前所未有的方式&#xff0c;赋予非技术人群实现梦想的能力 &#x1f525;能用AI-低代码传送门&#xff1a;https://www.nyai.chat …

【运维】从一个git库迁移到另一个库

工作目录&#xff1a; /home/java/hosts 10.60.100.194 脚本 hosts / hostsShell GitLab (gbcom.com.cn) 核心代码

AOP实现日志记录需求

首先创建annotation包,包下创建SystemLog类 Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD}) public interface SystemLog {String businessName(); }创建aspect包&#xff0c;包下创建LogAspect类 Component Aspect Slf4j public class LogAspect {Pointc…

给RAG系统做一次全面「体检」,亚马逊开源RAGChecker诊断工具

亚马逊上海人工智能研究院成立于 2018 年&#xff0c;已成为深度学习研究领域的领先机构之一&#xff0c;共发表了&#xff5e;90 篇论文。研究领域包括深度学习的基础理论、自然语言处理、计算机视觉、图机器学习、高性能计算、智能推荐系统、欺诈检测与风险控制、知识图谱构建…

【Redis分析】(一) 主从同步

主从复制 - 数据备份, 读写分离, 手动高可用 负载均衡: 主结点只负责处理写请求, 从节点负责读请求;主从复制, 主机挂了, 我们可以手动切换从机, 还可以搭配哨兵实现自动切换, 实现高可用;需要注意的是, 在主从模式下, 假设进行同步的过程中主节点宕机了, 那么从节点此时还没有…

Ubuntu | 右上角网络图标消失,有线网络在设置中消失,虚拟机没网

目录 第一步&#xff1a;删除 NetworkManager 缓存文件第二步&#xff1a;修改 /etc/NetworkManager/NetworkManager.conf第三步&#xff1a;重启 NetworkManager第四步&#xff1a;右上角网络图标出现 参考博客&#xff1a;虚拟机没网&#xff0c;重启网络服务&#xff1a;Fai…

手机操作技巧:如何进入锁定的Android手机

被锁定在您的 Android 手机之外可能是一种令人沮丧的经历&#xff0c;尤其是当您存储了重要文件和数据时。幸运的是&#xff0c;您可以尝试几种方法来重新获得对手机的访问权限。在这篇博文中&#xff0c;我们将探讨可用于解锁锁定的 Android 手机的各种技术和工具。我们还将提…

80.游戏的分辨率修改思路与分析

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易道云信息技术研究院 上一个内容&#xff1a;79.游戏分析工具闪屏问题优化与数据被修改高亮 GAMEHACKER2.exe 工具下载地址&#xff…

Neo4j图数据库Docker部署至服务器

Neo4j图数据库Docker部署至服务器 文章目录 Neo4j图数据库Docker部署至服务器1. Neo4j介绍2. 拉取Docker镜像3. 创建容器并运行4. 导入数据&#xff08;可选&#xff09;5. 访问测试 1. Neo4j介绍 Neo4j 是一种基于图数据库管理系统&#xff0c;它专门用于存储和查询图数据结构…

Vuepress,搭建自己的技术文档

Vuepress Vuepress用于构建静态站点&#xff0c;非常适合搭建技术文档。如果手头上有开源项目&#xff0c;或者公司内部有项目需要做官网&#xff0c;且官网中大部分都是介绍、用法之类的文章。那么Vuepress是不二选择&#xff01; 我们看到的一些项目的技术文档&#xff0c;…

河北学术会议:机器视觉、图像处理与影像技术领域

第二届机器视觉、图像处理与影像技术国际会议&#xff08;MVIPIT 2024&#xff09;将于2024年9月13日-15日在中国张家口召开。MVIPIT2024聚焦机器视觉、图像处理与影像技术&#xff0c;旨在为专家、学者和研究人员提供一个国际平台&#xff0c;分享研究成果&#xff0c;讨论问题…

WebSocket可拓展业务组件搭建,无侵入实现WebSocket通信信息自定义业务消费

组件概述 面对C端产品&#xff0c;往往会携带有客户端和服务端的双端通信以实现实时交互的效果&#xff0c;但是目前HTTP1.1并不支持双端通信&#xff0c;因此&#xff0c;对于聊天室、多人实时游戏等场景&#xff0c;就需要用到一个新的通信协议&#xff1a;WebSocket。 更多…

UE5-C++入门教程(二)---编写Editor类别的自定义模型实现小球规划路线的可视化

前言 本教程将以图文教程的形式讲述如何快速入门通过C使用UE5.4进行项目编写。UE5的教程系列 第一期&#xff1a;UE5-C入门教程(一)&#xff1a;使用代码创建一个指定目标的移动小球-CSDN博客 UE5与ROS2实战->基于UE5和ROS2的激光雷达深度RGBD相机小车的仿真指南(一)—Unre…

MoneyPrinterTurbo的部署,在服务器Ubuntu22.04系统下——点动科技

在服务器Ubuntu22.04系统下&#xff0c;MoneyPrinterTurbo的部署 一、ubuntu22.04基本环境配置1.1 更换清华Ubuntu镜像源1.2 更新包列表&#xff1a;2. 安装英伟达显卡驱动2.1 使用wget在命令行下载驱动包2.2 更新软件列表和安装必要软件、依赖2.2 卸载原有驱动2.3 安装驱动2.4…

Axure高端交互元件库:助力产品与设计

用户体验&#xff08;UX&#xff09;和用户界面&#xff08;UI&#xff09;设计对于任何产品的成功都至关重要。为了在这个竞争激烈的市场中脱颖而出&#xff0c;设计师和产品开发团队需要依赖强大的工具来创造引人注目且功能丰富的交互界面。下面介绍一款Axure精心制作的"…

物联网(IoT)详解

物联网&#xff08;IoT&#xff09;详解 1. IoT定义简介2. IoT工作原理3. IoT关键技术4. 物联网与互联网区别5. IoT使用场景6. 开源物联网平台7. 参考资料 1. IoT定义简介 首先第一个问题&#xff0c;什么是物联网&#xff08;IoT&#xff09;? 物联网&#xff08;英文&#…

Linux:CentOS配置

一&#xff0c;安装VMware 这个可以通过官网获取 vmware下载 也可以联系我&#xff0c;我发给你 二&#xff0c;安装CentOS Centos官网找要下载的版本&#xff1a; https://vault.centos.org/ 阿里云镜像&#xff1a;https://mirrors.aliyun.com/centos-vault/?spma2c6h.13…

如何搭建redis哨兵集群

1. 构建redis镜像 FROM redis:7.0.15-alpine3.20# install tools RUN apk add curl --no-cache &&\apk add bash --no-cache # COPY redis.conf /usr/local/etc/redis/redis.confCMD [ "redis-server", "/usr/local/etc/redis/redis.conf"] dock…