
form.val() 读不到 select 的 value 值
根本原因不是 select 本身没值,而是 layui 的 form.val() 只读取它“接管过”的表单控件——而原生 <select> 必须先被 form.render() 初始化,且要有 lay-filter 属性,否则 form.val() 完全无视它。
常见错误现象:form.val('myForm') 返回对象里没有 duty_type 字段,哪怕 DOM 中已选中;或者返回的是空字符串、undefined,但控制台没报错。
- 检查
<select>是否在layui-form容器内,且父<form>有lay-filter="myForm" - 确认 JS 中调用了
form.render()(或form.render('select', 'myForm')),尤其动态插入的下拉框必须手动 render -
<option>必须带value属性,空value=""会被当成未选中(除非显式设selected) - 避免在
<select>上写id或name冲突:layui 依赖name匹配字段名,name="duty_type"就得对应后端接收字段名
submit 回调里 data.field 缺失 select 值
这是最典型的“提交时收不到值”场景。Layui 的 form.on('submit(filter)') 回调中 data.field 是自动序列化的结果,但它只收集满足两个条件的元素:有 name 属性 + 被 layui 表单模块识别并同步过状态。
如果 data.field 里压根没有你的 select 字段名,说明它没被纳入表单采集流程。
- 确保每个
<option>都有非空value,例如<option value="manager">经理</option>,而不是仅靠文本内容 - 不要用
innerHTML或textContent取值替代 ——data.field不读这些 - 若下拉框是异步加载(比如通过 AJAX 填充
<option>),必须在填充完后立即执行form.render('select', 'myForm'),再触发提交 - 禁用状态(
disabled)的<select>不会出现在data.field中,如需传值,改用lay-ignore属性或手动拼接
下拉框显示文本对,但提交的是空或默认值
这通常发生在初始化逻辑混乱时:页面刚加载就调用 form.val() 赋值,但此时 <select> 还没被 form.render() 接管,导致赋值无效,最终提交时回退到第一个 <option>(尤其是 value="" 的提示项)。
性能影响不大,但业务逻辑会出错——比如“请选择”被当成真实选项提交。
- 赋值务必在
form.render()之后进行,顺序不能颠倒 - 避免用
selected属性硬编码默认项,优先用form.val('myForm', {duty_type: 'manager'})控制 - 如果依赖服务器返回的默认值,应在
form.render()后再调用form.val(),不要在 HTML 里写selected混淆状态 - 注意大小写:后端模型字段名是
DutyType,前端name就得是"DutyType",否则 ASP.NET Core 的 [FromForm] 绑定失败
富文本 + 下拉框混合表单提交异常
当 <select> 和 layedit(富文本)共存于同一表单,且都依赖 form.on('submit') 时,容易因同步时机出问题:富文本内容未同步到隐藏 <textarea>,导致整个 data.field 采集不全,连带影响下拉框字段看似“消失”。
这不是下拉框的问题,而是表单状态不同步的连锁反应。
- 务必为富文本添加验证规则,强制调用
layedit.sync(index),例如:form.verify({ content: function(value) { return layedit.sync(index); } }); - 不要把
layedit.build()和form.render()放在不同 JS 模块异步执行,确保 DOM 渲染、编辑器初始化、表单接管三者完成后再允许提交 - 调试时在 submit 回调第一行加
console.log(data.field),确认所有字段是否齐全——缺失哪个,就重点查哪个控件的初始化链路
<select> 没 render,或者 render 了但没指定 filter,导致 form.val() 和 data.field 都找不到它。


















