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

2025/6/19 1:28:12 来源：https://blog.csdn.net/qq_24091555/article/details/148667996 浏览: 次关键词：关于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>