layui select 无法直接显示 option 的辅助描述,需通过 data-desc 属性注入并在 form.render('select') 后动态插入带样式的 small 元素到 dd 底部,且须每次渲染后重复执行以避免丢失。

原生 select + option 不支持在选项下方显示辅助描述文字,Layui 的 lay-select 渲染后生成的 dl/dd 结构也默认不解析额外文本——直接写 title 或加 span 会被忽略或破坏 DOM 结构。
用 data-desc 属性注入描述,并在渲染时手动插入 DOM
Layui 不会自动读取 option 上的自定义属性,但你可以利用它作为数据源,在 form.render('select') 后主动补全描述节点。关键是在 dd 内部追加一个带样式的 small 或 span 元素。
- 给每个
option加data-desc属性:<option value="1" data-desc="负责前端框架选型与落地">前端架构师</option> - 在
form.render('select')完成后,遍历对应dl.layui-anim > dd,读取lay-value对应的原始option,取出data-desc插入dd底部 - 加简单 CSS 控制样式(如
font-size: 12px; color: #999; padding-top: 4px;),避免撑高整个下拉项高度
避免触发 layui.form.select 的重绘丢失描述
一旦调用 form.render('select'),Layui 会清空并重建 dl 内容,你之前插入的 small 会被抹掉。所以不能只做一次,必须封装为可重复执行的函数,并在每次渲染后调用。
- 不要把描述逻辑写在页面加载时的单次初始化里
- 推荐绑定到
form.on('select(filterName)')之后、或表单重载(如form.render()全局调用)的回调中 - 若配合远程加载(如 ajax 拉取选项),务必在成功回调里调用一次描述补全函数,否则新选项无描述
不要用 title 属性模拟描述文字
title 是浏览器原生 tooltip,仅鼠标悬停触发,且 iOS 和部分安卓 WebView 默认禁用或延迟极高;用户扫视列表时根本看不到,起不到“辅助说明”作用。
- 即使你在
option上写了title="xxx",Layui 渲染后的dd也不会继承这个属性 - 强行给
dd加title属性,会导致鼠标移入就弹 tooltip,干扰下拉选择操作 - 真正需要的是常驻、可见、排版可控的静态文本,不是悬浮提示
最易被忽略的一点:Layui 的 dd 默认是 display: block 且无内边距,直接追加 small 可能紧贴选项文字底部,视觉上拥挤。务必用 padding-top 或 margin-top 隔开,并限制 line-height 防止换行错位。











