Layui Selcet选择框动态选择问题

前言

时隔多日我也是重新回归写作,高考已经完毕,我将继续我的文章创作,今天我将分享的是我在开发我自己的一个新项目所遇到的问题,这里预告一下我的新项目: VitaApi管理系统 这个系统可以看作是萌新源api管理系统的延续,算是续作吧,也是我为了完成高考前想要写一套不错的api管理系统的愿望,大家后续可以关注一下进展,如果项目完工我也会在各大平台发布通知的

正文

今天要讲的是layui的选择框动态选择问题

就像下面的图片一样,这个是我项目的代码片段

这段代码是用来修改回显api信息的,当用户点击了修改按钮就会弹出一个层,里面的表单是用作修改api信息的,因此就有了回显让用户不必再次输入api的各项信息仅修改要修改的信息即可,大大增加了便利性

那么我在回显的时候碰到了什么问题呢?仔细看图中的 请求方式 返回格式 栏这两个栏都是选择框,观察前面我圈起来的代码你也可以发现他们会比其他元素回显多一个步骤,多了一个:

form.render(body.find("#api-format"));//刷新一下选择框让数据成功回显

在这里我们调用了 form.render 方法来刷新表单元素

下面是错误的方法:

form.render("#api-format");//刷新一下选择框让数据成功回显

因为是弹出新的层所以我们不能单单指定元素id,而是应该先通过表单元素的父级元素来指定我们要刷新的元素,如果直接指定元素id这里指向的不是弹出层,而是弹出层的发起者所在的层,也就是修改按钮所在的层。而我们所要刷新的层在弹出层,跟修改按钮并不在一个层所以我们需要使用 body.find("#api-format") 来指定弹出层id为 #api-format 的元素也就是我们要刷新的选择框

如图我们需要给弹出层中select框指定一个id,这里我们指定的id是:api-format ,这个id用作后续刷新回显

如果没有刷新回显会怎么样?也就是没有使用 form.render(body.find("#api-format")); 来刷新选择框会发生什么?我们将刷新方法注释掉

下面就是没有使用的结果

可以看到我们要的元素虽然有高亮看起来是被选择了实际上并没有被选中,这里我们就需要刷新一下选择框,用到的代码就是上面所提到的 form.render(body.find("#api-format"));

现在我们取消注释

可以观察到成功回显数据了

结尾

本文讲解了如何在弹出层中动态修改选择框的选择元素,要点就是使用 form.render(body.find("#api-format"));方法来刷新选择框元素,以此达到数据回显的目的,其中api-format是自行设置的选择框元素id,大家也可以自行更换,运用这个方法我们可以成功回显数据

最后感谢大家的阅读,如果这篇文章对您有帮助,请帮我点点赞,分享给更多有需要的人,另外大家可以关注我的新项目动态到时候希望大家可以踊跃尝试我的新项目,谢谢大家

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

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

相关文章

HarmonyOS鸿蒙应用开发-ZRouter让系统路由表变得更简单

介绍 ZRouter是基于Navigation系统路由表和Hvigor插件实现的动态路由方案。 系统路由表是API 12起开始支持的,可以帮助我们实现动态路由的功能,其目的是为了解决多个业务模块(HAR/HSP)之间解耦问题,从而实现业务的复…

Redis高可用技术之持久化

一、Redis高可用 在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是一年有多少秒可以提供正常服务(99.9%、99.99%、99.999%等)。但是在Redis语境中,高可用的含义似乎要宽泛一些,除了保证提供…

MySQL InnoDB事务隔离和并发控制面试题详解

1. 为什么 MySQL 使用 B+ 树作为索引而不是 B 树? MySQL 选择使用 B+ 树作为索引主要有以下几个原因: 减少 IO 次数,提高效率:B+ 树的所有数据都存储在叶子节点,非叶子节点只存储索引,树的高度较低,因此查找路径较短,减少了磁盘 IO 次数。查询效率更加稳定:由于数据仅…

Hyper-V 安装 CentOS 8.5

前言 Hyper-V安装文档:在 Windows 10 上安装 Hyper-VCentOS 系统下载:CentOS 国内镜像源 8.5.2111作者:易墨发布时间:2023.10.01原文地址:https://www.cnblogs.com/morang/p/devops-hyperv-centos-install.html使用命令安装 以管理员身份运行 PowerShell 命令: Enable-…

c++初阶知识——string类详解

目录 前言: 1.标准库中的string类 1.1 auto和范围for auto 范围for 1.2 string类常用接口说明 1.string类对象的常见构造 1.3 string类对象的访问及遍历操作 1.4. string类对象的修改操作 1.5 string类非成员函数 2.string类的模拟实现 2.1 经典的string…

GAMES104:05游戏引擎中的渲染系统2:渲染中的光照、材质和shader-学习笔记

文章目录 一、渲染方程及其挑战二、基础光照解决方案-简化版简化光源简化材质简化阴影 三、基于预计算的全局光照3.1挑战和计算思路傅里叶变换球谐函数(Spherical Harmonics) 3.2 SH Lightmap:预计算 GI3.3 探针 Probe:Light Prob…

无涯·问知财报解读,辅助更加明智的决策

财报解读就像是给公司做一次全面的体检,是理解公司内部运作机制和市场表现的一把钥匙,能够有效帮助投资者、分析师、管理层以及所有市场参与者判断一家公司的健康程度和发展潜力。 星环科技无涯问知的财经库内置了企业年报及财经类信息,并对…

Linux:传输层(1) -- UDP协议

1. 端口号 同一台主机的不同端口号(Port)标记了主机上不同的进程,如下图所示: 在 TCP/IP 协议中 , 用 " 源IP", "源端口号", "目的IP", "目的端口号", "协议号" 这样一个五元组来标识一个通信 ( 可…

制作excel模板,用于管理后台批量导入船舶数据

文章目录 引言I 数据有效性:基于WPS在Excel中设置下拉框选择序列内容II 数据处理:基于easyexcel工具实现导入数据的持久化2.1 自定义枚举转换器2.2 ExcelDataConvertExceptionIII 序列格式化: 基于Sublime Text 文本编辑器进行批量字符操作引言 需求: excel数据导入模板制…

基于 HTML+ECharts 实现的大数据可视化平台模板(含源码)

构建大数据可视化平台模板:基于 HTML 和 ECharts 的实现 大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示,团队可以快速理解复杂的数据模式,发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一…

js逆向——origin/refer请求头反爬

今日受害网站: https://www.regulations.gov/docket/FDA-2016-D-1399/document 最终目标:爬取该网站中的新闻摘要 首先打开网页,刷新一下,观察都返回了哪些数据 然后我们ctrlf进行关键字搜索 进一步,只过滤含有docu…

Linux_实现TCP网络通信

目录 1、实现服务器的逻辑 1.1 socket 1.2 bind 1.3 listen 1.4 accept 1.5 read 1.6 write 1.7 服务器代码 2、实现客户端的逻辑 2.1 connect 2.3 客户端代码 3、实现服务器与客户端的通信 结语 前言: 在Linux下,实现传输层协议为TCP…

MySQL数据库-备份恢复

一、MySQL日志管理 1.为什么需要日志 用于排错用来做数据分析了解程序的运行情况,了解MySQL的性能 2.日志作用 在数据库保存数据时,有时候不可避免会出现数据丢失或者被破坏,这样情况下,就必须保证数据的安全性和完整性&#…

鸿蒙SDK开发能力

什么是鸿蒙SDK:HarmonyOS(Software Development Kit)是面向应用和服务开发的开放能力合集,本质就是工具集,与JDK、AndroidSDK在逻辑上有相似之处 18N:1指的是手机,8指的是车机、音箱、耳机、手表/手环、平板、大屏、PC、AR/VR&am…

PCL-基于超体聚类的LCCP点云分割

目录 一、LCCP方法二、代码实现三、实验结果四、总结五、相关链接 一、LCCP方法 LCCP指的是Local Convexity-Constrained Patch,即局部凸约束补丁的意思。LCCP方法的基本思想是在图像中找到局部区域内的凸结构,并将这些结构用于分割图像或提取特征。这种…

DolphinScheduler学习

1.查看文档 点击访问:https://dolphinscheduler.apache.org/zh-cn/docs 我们可以看到相关的文档简介里有 介绍 DolphinScheduler是Apache DolphinScheduler 是一个分布式易扩展的可视化DAG工作流任务调度开源系统。适用于企业级场景,提供了一个可视化…

太原高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

随着科技的不断进步,智能制造已经成为推动制造业转型升级的重要力量。太原高校大学智能制造实验室紧跟时代步伐,积极推进数字孪生可视化系统平台的建设,并于近日圆满完成了项目的验收工作。这一里程碑式的成果,不仅标志着实验室在…

uniapp安卓plus原生选择系统文件

uniapp安卓plus原生选择系统文件 效果&#xff1a; 组件代码&#xff1a; <template xlang"wxml" minapp"mpvue"><view></view> </template> <script>export default {name: file-manager,props: {},data() {return {is…

靶场实战 _ ATTCK 实战 Vulnstack 红队

环境配置 网络拓扑图 (仅供参考) 攻击机&#xff1a;kali ip:192.168.111.5靶机&#xff1a;web-centos 外网ip:192.168.111.10 内网ip:192.168.93.100web1-ubuntu ip: 192.168.93.120PC ip: 192.168.93.30win 2008 ip:192.168.93.20win 2012 ip:192.168.93.10 信息搜集 端口…

【C++】string类(下)

个人主页~ string类&#xff08;上&#xff09; string类 二、模拟实现string类1、头文件string.h2、常见构造3、容量函数4、访问及遍历5、类对象修改6、流插入流提取重载 二、模拟实现string类 今天我们来实现一下上篇文章中详细介绍过的接口 1、头文件string.h #pragma onc…