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

关于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.xdnf.cn/news/14325.html

相关文章:

  • EventSourcing.NetCore:基于事件溯源模式的 .NET Core 库
  • 内部代理服务器单点故障导致后端服务概率性失败
  • 算法的几大模块
  • SpringBoot入门 springboot模版注入问题
  • 单例模式的好处
  • 火山引擎解码生态型增长铁律
  • QMI8658A 六轴惯性测量单元的应用介绍
  • Tomcat配置学习
  • 剑指offer26_顺时针打印矩阵
  • Java单例模式的七种实现方式每种方式的应用场景和最佳使用场景分析
  • LeetCode 第75题:颜色分类
  • 设计模式(10)——创建型模式之抽象工厂
  • 机器学习模型评估与选择
  • Python 爬虫入门 Day 4 - 模拟登录爬虫与 Session 维持
  • 【极客时间】大模型RAG进阶实战营毕业总结
  • 通过 O-RAN 传感进行异常识别和防护
  • 打造丝滑滚动体验:Scroll-driven Animations 正式上线!
  • PDF超强无损压缩
  • 记录一次 Oracle DG 异常停库问题解决过程
  • [直播推流] rtmpdump 库学习
  • Jmeter录制APP脚本
  • 【FreeRTOS-队列集】
  • Java的接口
  • SKUA-GOCAD入门教程-第八节 线的创建与编辑4
  • Milvus/ES 插入方案对比
  • K8s 容器化安全产品性能问题排查指南
  • web3方法详解
  • 【Java】网络编程基础与聊天室架构分析
  • HTML 从入门到起飞 · 系列合集:一站式学习不掉线
  • 构建多智能体(AI Agent)的高效协作平台——CrewAI探索