关于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代码内容即可。