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

效果图

原理

先执行接口获取动态数据,然后在 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.rhkb.cn/news/404416.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BUU】[NewStarCTF 2023 公开赛道]Final -CP读取文件内容

漏洞检测 访问首页发现是ThinkPHP5 的站点 用工具扫描一下,发现存在ThinkPHP5.0.23 RCE漏洞 访问验证,写入shell 成功写入shell. 根目录发现flag,但是权限不足 提权获取flag 准备提权,这里一开始尝试了find,但是find权限不足 尝试采用cp命令,移动到web目录,发现访问还是…

基于web的物流管理系统--论文pf

TOC springboot473基于web的物流管理系统--论文pf 第1章 绪论 1.1 课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可…

基于深度学习的图像特征优化识别复杂环境中的果蔬【多种模型切换】

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主项目介绍图像特征优化方法模型原理及实验对比模型训练每文一语 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 项目介绍 基于深度学习的图像识别技术广泛应…

清影智能开源版CogVideox:开源文本到视频生成模型的探索

人工智能&#xff08;AI&#xff09;领域的创新一直在不断推进&#xff0c;而下一个前沿领域&#xff0c;很可能就是文本到视频生成模型。在不久的将来&#xff0c;我们将会看到许多中小型公司推出自己的文本到视频生成模型&#xff0c;这一技术将会迅速发展。而这正是为什么当…

Java | Leetcode Java题解之第350题两个数组的交集II

题目&#xff1a; 题解&#xff1a; class Solution {public int[] intersect(int[] nums1, int[] nums2) {Arrays.sort(nums1);Arrays.sort(nums2);int length1 nums1.length, length2 nums2.length;int[] intersection new int[Math.min(length1, length2)];int index1 …

建筑工程项目管理系统-计算机毕设Java|springboot实战项目

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…

Java——反射(4/4):反射的作用、应用场景(案例需求、实现步骤、代码实现)

目录 作用 应用场景 案例需求 实现步骤 代码实现 作用 基本作用&#xff1a;可以得到一个类的全部成分然后操作。可以破坏封装性。最重要的用途是&#xff1a;适合做Java的框架&#xff0c;基本上&#xff0c;主流的框架都会基于反射设计出一些通用的功能。 通过反射能够…

JVisualVM 基础知识与配置详解(图文界面)

目录 前言1. 基本知识2. 下载配置3. 测试 前言 对于Java的基本知识&#xff0c;推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项目】实战CRUD的功能整理&#xff08;持续更新&#xff09; 1. 基本知识 …

[Meachines] [Easy] Bastion SMB未授权访问+VHD虚拟硬盘挂载+注册表获取NTLM哈希+mRemoteNG远程管理工具权限提升

信息收集 IP AddressOpening Ports10.10.10.134TCP:22, 135, 139, 445, 5985, 47001, 49664, 49665, 49666, 49667, 49668, 49669, 49670 $ nmap -p- 10.10.10.134 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH fo…

multimodel ocr dataset

InternLM-XComposer2-4KHD InternLM-XComposer2-4KHD a light-weight Vision Encoder OpenAI ViT-Large/14Large Language Model InternLM2-7B, 这篇论文采用的是一种动态分辨率的输入&#xff1b; 全图有一个global view,resize到336*336&#xff1b; 然后把图片resize再pad…

Kubernetes群集部署

Kubernetes概述 是一个开源的Docker容器编排技术 源自于google的borg2015年7月kubernetesv1.0正式发布调度计算集群节点&#xff0c;动态管理节点上的作业使用[labels]和[pods]概念&#xff0c;将应用按逻辑单元分组 主要用途 自动化部署、扩展和管理容器应用资源调度部署管理…

计算机毕业设计pyspark+django+scrapy租房推荐系统 租房大屏可视化 租房爬虫 hadoop 58同城租房爬虫 房源推荐系统

用到的技术: 1. python 2. django后端框架 3. django-simpleui&#xff0c;Django后台 4. vue前端 5. element-plus&#xff0c;vue的前端组件库 6. echarts前端可视化库 7. scrapy爬虫框架 基于大数据的租房信息推荐系统包括以下功能&#xff1a…

Windows下串口编程与单片机串口设备通信(win32-API)

一、前言 串行通信接口&#xff0c;通常简称为“串口”&#xff0c;是一种数据传输方式&#xff0c;其中信息以连续的比特流形式发送&#xff0c;每个比特在不同的时间点被传输。这与并行通信形成对比&#xff0c;在并行通信中&#xff0c;多个比特同时通过多个线路传输。串口…

学习笔记 韩顺平 零基础30天学会Java(2024.8.15)

P512 ArrayList底层源码2 P513 Vector注意事项 最近有点懈怠&#xff0c;要去新的环境上学了&#xff0c;有点焦虑&#xff0c;调整状态ing&#xff0c;准备开始研一&#xff0c;希望能继续本科的荣耀&#xff01;&#xff01; PS&#xff1a;本科应该算是荣耀的吧哈哈哈哈哈

html 首行缩进2字符

1. html 首行缩进2字符 1.1. 场景 在Html开发中让一段文字&#xff08;富文本等&#xff09;首行缩进两个文字&#xff0c;可能在前面加上8个“ ”&#xff0c;因为过去对CSS不熟悉&#xff0c;这种方法实现虽然比较直接&#xff0c;但是文字多的时候会有很多“ ”充斥在代码中…

深度学习设计模式之外观模式

文章目录 前言一、介绍二、特点三、详细分析1.核心组成2.代码示例3.优缺点优点缺点 4.使用场景 总结 前言 外观模式是结构型设计模式&#xff0c;定义一个高层接口&#xff0c;用来访问子系统中的众多接口&#xff0c;使系统更加容易使用。 一、介绍 外观设计模式&#xff08…

机器学习第十二章-计算学习理论

目录 12.1基础知识 12.2 PAC学习 12.3有限假设空间 12.3.1可分情形 12.3.2不可分情形 12.4VC维 12.5 Rademacher复杂度 12.1基础知识 计算学习理论研究的是关于通过"计算"来进行"学习"的理论&#xff0c;即关于机器学习的理论基础&#xff0c;其目的…

encoding with ‘idna‘ codec failed (UnicodeError: label empty or too long)

今天在使用Flask连接mysql的时候&#xff0c;遇到了一个报错&#xff1a;encoding with ‘idna’ codec failed (UnicodeError: label empty or too long) 网上查了一下说是字符集的问题&#xff0c;然后尝试修改了一下字符集&#xff0c;结果还是不行。 最后去翻阅SQLAlchemy…

汇昌联信科技做拼多多电商有哪些策略?

在当今竞争激烈的电商平台上&#xff0c;汇昌联信科技以其独到的策略成功立足拼多多。他们不仅凭借对市场的深刻理解&#xff0c;还通过一系列创新举措&#xff0c;实现了品牌的快速成长和市场份额的不断扩大。接下来&#xff0c;我们将深入探讨汇昌联信科技在拼多多平台上所采…

Python爬虫案例一:获取古诗文并按用户输入的作者名进行数据保存

前言&#xff1a; 1、什么是爬虫&#xff1f;也称为网页蜘蛛&#xff08;Web Spider&#xff09;&#xff0c;通俗来说&#xff0c;解放人的双手, 去互联网获取数据, 以数据库, txt, excel, csv, pdf, 压缩文件, image, video, music保存数据。本质: 模拟浏览器, 向服务器发送…