当前位置: 首页 > news >正文

关于layui select option莫名多一行的问题

场景说明

网页代码如下:
        <div class="layui-form-item"><label class="layui-form-label">抵销优惠劵</label><div class="layui-input-block"><select id="memberCouponId" name="memberCouponId" lay-filter="couponChange"><option value="" selected>如需要销除用户的优惠劵,请进行选择,否则请勿操作</option><#list memberCouponList! as coupon><option value="${(coupon.id?c)!}">${coupon.title!}<span style="color:#ff4343">(-£${(coupon.couponAmount?c)!})</span></option></#list></select></div></div>
网页显示结果

在这里插入图片描述

HTML代码

在这里插入图片描述
问题原因:实际layui会页面加载中,会根据对应的class name和select元素来渲染显示元素。用于在option里面有span块,导致layui select render识别有两个option选项。

layui form.js源码

在这里插入图片描述

解决方法

        <div class="layui-form-item"><label class="layui-form-label">抵销优惠劵</label><div class="layui-input-block"><select id="memberCouponId" name="memberCouponId" lay-filter="couponChange"><option value="" selected>如需要销除用户的优惠劵,请进行选择,否则请勿操作</option><#list memberCouponList! as coupon><option value="${(coupon.id?c)!}">${coupon.title!}(-£${(coupon.couponAmount?c)!})</option></#list></select></div></div>

去掉option包裹的span代码内容即可。

http://www.dtcms.com/a/251754.html

相关文章:

  • NodeJS哪些情况下会造成内存泄漏和避免方法
  • 建造者模式Builder Pattern
  • LeetCode HOT 100
  • ShenNiusModularity项目源码学习(34:总结)
  • 每日学习一道数模题-2024国赛E题-交通流量管控
  • React19源码系列之Hooks(useState)
  • C++ 类的知识点
  • 【Docker 05】Container - 容器
  • Spring AI的ChatClient和ChatModel接口
  • Node.js 中的 Token 认证机制详解
  • 动态规划之斐波那契数(一)
  • java 集合 泛型
  • (LeetCode 每日一题) 1432. 改变一个整数能得到的最大差值(贪心)
  • 编译链接实战(30)strip移除了哪些内容
  • JVM 类加载过程/对象创建过程/双亲委派机制/垃圾回收机制
  • 大模型微调(Fine-tuning)概览
  • Vue-Leaflet地图组件开发(四)高级功能与深度优化探索
  • 基于51单片机的温度和液位监测系统(串口传输)
  • Vue 性能优化
  • kicad运行时出错,_Pnext->_Myproxy = nullptr;访问内存出错
  • 自我实现的量子隐喻:在可能性场域中动态拓展涌现节点
  • 安装前端vite框架,后端安装fastapi框架
  • Multisim仿真Buck电路基本拓扑
  • 进程和线程区别、管道和套接字、共享变量、TCP三次握手,是否可以少一次握手、子进程和主进程区别和API——Nodejs
  • Spring Cloud Gateway 全面学习指南
  • LabVIEW电路板焊点自动检测
  • 力扣刷题(第五十八天)
  • 【测开面试题】八股文总结
  • Kafka 可靠性保障:消息确认与事务机制(二)
  • 路由器端口映射怎么设置?本地固定内网IP给外面网络连接访问