当前位置: 首页 > 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代码内容即可。

相关文章:

  • 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;访问内存出错
  • 专业做网站的公司有哪些/快排seo
  • 龙湾区网站制作公司/哈尔滨seo优化软件
  • 个人网站建设价格套餐/百度推广seo怎么学
  • 巴楚网站建设/店铺运营方案策划
  • 高端网站开发制作/搜索引擎优化师工资
  • 电商平台网页设计/企业网站seo托管怎么做