layui下拉框需通过DOM获取选中文本:在form.on('select(xxx)')回调中,用data.elem.options[data.elem.selectedIndex].text获取,而非依赖event参数中的text字段。

layui下拉框如何通过 select 事件拿到选中的 text 值
layui 的 select 组件默认只在 change 事件里暴露 value,不直接提供 text。想拿到选中项的文本,得自己从 option 元素里查——不是靠 layui 的 API 返回,而是读 DOM。
常见错误是以为 layui.form.on('select(xxx)', ...) 的回调参数里有 text 字段,其实只有 value;或者试图用 this.value 或 e.value 直接取文本,结果拿到的还是 value。
- 必须用原生 DOM 方法定位到当前
select元素,再找selectedOptions[0]对应的text - 推荐在 form 监听回调里用
$(this).find('option:selected').text()(需引入 jQuery) - 纯 JS 写法:
this.options[this.selectedIndex].text,更轻量、无依赖 - 注意:如果下拉项是动态渲染(比如用
layui.form.render('select')后追加的),要确保 DOM 已就绪再查
为什么不能只靠 layui 的 event 参数获取 text
layui 的 form.on('select(xxx)') 回调中,e 对象只包含 e.elem(DOM 元素)、e.value(选中值)和 e.othis(原始 select 标签的 jQuery 包装对象),没有 text 字段。这是设计使然,不是 bug。
它的定位是轻量表单交互,文本内容属于业务层逻辑,由开发者按需提取。强行塞进 event 可能增加兼容负担(比如多选、自定义 option 属性等场景)。
-
e.value是可靠的,对应option的value属性值 -
e.elem是原生 DOM,可直接用于.options和.selectedIndex - 不要尝试
e.othis.text()或e.othis.val().text(),语法无效
完整示例:监听 select 并同时拿到 value 和 text
layui.use(['form'], function(){
var form = layui.form;
form.on('select(city)', function(data){
var selectElem = data.elem; // 原生 DOM
var value = data.value;
var text = selectElem.options[selectElem.selectedIndex].text;
console.log('value:', value); // 如 'shanghai'
console.log('text:', text); // 如 '上海市'
// 或用 jQuery(如果项目已引入)
// var $select = $(data.othis);
// var text = $select.find('option:selected').text();
});
});
这段代码能稳定工作,不依赖 layui 版本(2.8.x 和 2.9.x 均适用),也不受是否启用 lay-search 影响。唯一前提:select 标签本身有正确的 option 结构,且 text 是写在标签体里的(<option value="a">这里是text</option>),不是靠 JS 动态插入 innerText。
容易被忽略的边界情况
当 select 初始为空或第一项是空提示(如 <option value="">请选择</option>)时,用户首次选择后 selectedIndex 是 1,但若误用 selectElem.options[0].text 就会固定拿错。
- 永远用
selectElem.selectedIndex动态索引,别硬写数字 - 如果选项含 HTML(如
<option value="a"><b>加粗市</b></option>),.text会返回纯文本(“加粗市”),没问题;但.innerHTML会带标签,一般不用 - 禁用状态的 option 不会被选中,无需额外过滤
- 如果用了 lay-search 搜索功能,选中逻辑不变,DOM 查找方式也完全一致
真正麻烦的是 option 文本由 JS 异步填充(比如从接口拉城市名再 append),这时必须确保 form.render('select') 调用完成后再绑定事件,否则 options 长度可能为 0。


















