layui下拉框value="0"选项不被选中,根源在于HTML、jQuery、Layui三层对0的类型处理不一致:HTML需严格写为value="0"(带双引号),jQuery匹配和form.val()传参必须使用字符串"0",且渲染顺序须为先form.render()再赋值。

layui 下拉框 value="0" 的选项不被选中,不是 JavaScript 赋值失败,而是 layui 在解析和渲染阶段把 value="0" 当成了空值或非法值跳过了——它在 HTML 解析、jQuery 匹配、Layui 内部状态三者之间对 0 的处理不一致。
HTML 中 value="0" 被浏览器解析为 value=""
如果写成 <option value=0>未分类</option>(没加引号),部分浏览器会将其解析为 value=""。此时 jQuery 用 $('option[value="0"]') 根本找不到该元素,.prop('selected', true) 就无效。
- 必须写成带双引号的
<option value="0">未分类</option> - 检查开发者工具 Elements 面板,确认该 option 的
value属性确实是字符串"0",而非空或 undefined - 动态生成时别用
.html()拼接,改用.append('<option value="0">...</option>'),避免引号丢失
form.val() 对 0 值静默失败
form.val("filterName", {field: 0}) 看似调用了,但 layui 内部会把数字 0 和字符串 "0" 视为不同值;若 DOM 中是 value="0"(字符串),而你传的是数字 0,匹配就失败,UI 不更新。
- 确保传入
form.val()的值类型与<option value="...">中的值完全一致:字符串就传"0",数字就确保 HTML 里也是value=0(但不推荐) - 更稳妥的做法是绕过
form.val(),直接操作 DOM:$('#mySelect').find('option[value="0"]').prop('selected', true),再form.render('select') - 别在
form.render()前调form.val(),顺序必须是:DOM 存在 →form.render()→form.val()或手动设selected
带 lay-search 的 select 会“偷偷”恢复 0
启用搜索的下拉框有个隐藏逻辑:用户清空输入框时,layui 会尝试回填上次选中项。如果上次是 value="0",它可能自动把当前值切回 "0",造成“刚清空又弹回来”的错觉。
- 清除时不仅要设
.val(''),还要同步清理 UI 状态:$('#mySelect').siblings('.layui-form-select').find('.layui-this').removeClass('layui-this').addClass('layui-hide') - 如不需要该行为,直接移除
lay-search属性,用自定义搜索逻辑替代 - 调试时可临时禁用
lay-search,确认是否是它干扰了选中逻辑
真正卡住人的从来不是“怎么设”,而是 0 在 HTML、jQuery、Layui 三层里被当成三种东西:空字符串、布尔 false、合法数值。每一层都得对齐类型和存在性,漏一层,就白忙活。


















