直接用 data.value 获取选中值最稳妥的时机是在 form.on('select(filtername)', ...) 回调中,且 html 的 select 必须设置 lay-filter 属性;动态插入 select 后须立即调用 form.render('select'),否则 data.value 为 undefined。

直接用 data.value 就能拿到选中值,但传不传得过去,关键不在“取”,而在“时机”和“渲染状态”。
form.on('select(...)') 里取值最稳,但必须有 lay-filter
layui 的 select 事件监听完全依赖 lay-filter 属性,没它就根本触发不了回调。不是靠 id 或 name 匹配。
-
<select name="category" lay-filter="categoryFilter"></select>—— HTML 中必须显式写上 - JS 中监听必须严格对应:
form.on('select(categoryFilter)', ...) - 回调参数
data.value就是当前选中的 value 值,不用再$(...).val() - 如果下拉框是动态插入的(比如 AJAX 加载后
.append()),必须在追加完 option 后立刻调用form.render('select'),否则事件不生效、data.value为undefined
动态渲染 select 后,value 读出来是空或 undefined
这是最常踩的坑:DOM 更新了,但 layui 没“认”这个新 select。它只管理初始化时已存在的、或明确被 form.render() 刷新过的元素。
- 清空旧选项:
$('#mySelect').empty() - 插入新
<option></option>,并确保其中至少一个带selected属性(比如<option value="2" selected>杭州</option>) - 手动设置默认值也行:
$('#mySelect').val('2'),但之后必须跟form.render('select') - 如果表单容器有
lay-filter="userForm",推荐写成form.render('select', 'userForm'),避免误刷其他区域 - 漏掉
form.render()→ 点击无反应、data.value是空字符串或undefined
传给后端时,value 类型和后端接收方式要对齐
前端拿到的是字符串(data.value 总是 string),但后端可能期望整数、数组甚至 JSON 字符串。别假设自动转换。
- 传单个值:
data: { category_id: data.value }—— 后端用int category_id接收即可 - 传多个值(比如多选下拉):layui 原生 select 不支持多选,得换
xm-select;它的getValue('value')返回数组,需JSON.stringify()后作为字符串字段传 - 用
$.ajax传对象时,contentType: 'application/json'要配@RequestBody;不设 contentType 就走默认表单编码,后端用@RequestParam或Map接 - 后端收到
"1"却当成null?检查是否开启了 Jackson 的 strict number parsing,或前端传了空字符串没校验
真正卡住人的往往不是怎么取值,而是 select 渲染没完成就去绑事件,或者传参时没注意 content-type 和后端注解的搭配。尤其在级联场景里,第二个 select 还没 render 完,第一个的回调就发请求,结果第二个的 data.value 根本读不到。









