最稳妥方式是用data.elem[data.elem.selectedIndex].text获取选中文本,因data.elem为原始select DOM,可直接读取原生属性;误用data.othis或innerText易出错,动态修改option后须调用form.render('select')同步。
form.on('select(...)') 回调里用 data.elem[data.elem.selectedIndex].text
这是最稳妥、兼容性最好的方式。layui 的 form.on 监听会传入 data 对象,其中 data.elem 是原始 <select></select> dom 元素(不是美化后的 <dd></dd>),所以能直接用原生属性读取文本。
常见错误是误用 data.othis.text() 或 data.othis.innerText ——data.othis 是 Layui 渲染出的伪下拉面板里的 <dd></dd> 元素,它没有实时同步文本更新逻辑,尤其在动态重载 option 后极易读错。
-
data.value只能拿到 value 值,不是文本 -
this.innerText在回调里指向data.othis,不可靠 - 必须用
data.elem.selectedIndex定位真实选中项,再取.text
示例:
form.on('select(down_link_name)', function(data){
var text = data.elem[data.elem.selectedIndex].text;
console.log(text); // ✅ 正确:如“百度”
});
不监听事件时,用 jQuery 的 $("select#id option:selected").text()
如果只是点击按钮后「一次性获取」,不需要响应变化,就别绕路走 form.on。直接 jQuery 查 DOM 更直白,且不受 Layui 渲染时机影响。
注意前提是:select 已被 Layui 初始化过(即执行过 form.render() 或页面加载时自动渲染),否则 jQuery 读的是原始 HTML 的选中状态,可能和 UI 不一致。
- 确保
select有唯一id,比如id="down_link_name" - 不要写成
$("select").find("option:selected")——多个 select 时会冲突 - 如果用了
lay-search,搜索过滤不影响该选择器结果
示例:
$("#getBtn").on("click", function(){
var text = $("#down_link_name option:selected").text();
console.log(text); // ✅ 正确
});
动态修改 option 后,text 获取失效的典型原因
很多人改完 option 内容后发现 data.elem[...].text 还是旧值,问题不在获取逻辑,而在 DOM 更新没同步到 Layui 的内部映射。
Layui 渲染 select 时,会在 <dd></dd> 标签上加 lay-value 属性,这个值必须和对应 <option></option> 的 value 完全一致,否则选中态错位,连带 selectedIndex 指向错误。
- 动态添加
option后,必须立刻调用form.render('select') -
option的value和<dd></dd>的lay-value字符串要完全相等(包括空格、大小写) - 避免用
innerHTML替换整个select,改用appendChild或replaceChild精准操作
想读自定义属性(如 title、data-id)怎么办
Layui 允许在 <option></option> 上写任意自定义属性,但只能通过原生 DOM 方式读取,不能靠 data.othis 或 jQuery 的 .attr()(因为它们操作的是渲染层)。
正确姿势还是走 data.elem[data.elem.selectedIndex] 这条链,然后用标准 DOM 方法取值:
- 读
title:data.elem[data.elem.selectedIndex].title - 读
data-id:data.elem[data.elem.selectedIndex].getAttribute('data-id') - 读
data-extra:data.elem[data.elem.selectedIndex].dataset.extra
别试图从 data.othis 上取,它压根不反射这些属性。
<select></select> 元素及其 option 子节点上,而不是 Layui 生成的视觉层。一旦混淆这两层,90% 的“获取不到”问题就出现了。











