必须手动设置selected属性并调用form.render('select')才能使异步加载的下拉框默认选中第一项;拼接html时首个option需加selected,循环生成时索引为0加selected,form.val()设值后必须render,value="0"需特殊处理,selected属性在js渲染后失效。

异步加载后默认选中第一项必须手动设 selected 属性
直接在 AJAX 成功回调里 append() 或 html() 插入 <option></option> 后,界面不会自动高亮第一项——Layui 不会识别你新塞进去的 DOM 是否该被选中。
真正起效的操作只有两步:先让第一个 <option></option> 带上 selected 属性(不是 selected="selected",单写 selected 即可),再调 form.render('select') 同步 UI。
- 拼接 HTML 字符串时,第一个
<option value="1">北京</option>要写成<option value="1" selected>北京</option> - 用
$.each()循环生成选项时,在索引i === 0时加selected - 别信
$('#mySelect')[0].selectedIndex = 0,渲染后原生属性无效 - 如果用的是
layui.table的done回调,优先在这里操作,DOM 更确定
form.val() 设值 + form.render('select') 是最稳路径
如果你已经拿到数据、DOM 也就绪(比如编辑页回显),form.val() 配合 form.render('select') 是最直接的方式,比操作 selected 属性更少出错。
注意:form.val() 只设置原始 <select></select> 的 value,不触发 UI 更新;漏掉 form.render('select') 就等于白设。
- 单选:
form.val('myFilter', { 'status': '2' }),然后form.render('select', 'myFilter') - 多选:传数组,如
form.val('myFilter', { 'tags': ['a', 'b'] }) - 有
lay-filter时,第二个参数务必传 filter 名,避免重绘整个表单 - 确保
layui.use(['form'], function(){})内执行,否则form模块未加载会报错
value="0" 的选项默认不被识别,得手动处理
后端返回状态码 data.status === 0,执行 $('#status').val(0) 没反应?不是 JS 失效,是 Layui 渲染时跳过了 value="0" 和空字符串的 <option></option>。
正确做法是用 jQuery 定位并设属性,再 render:
- 先
$('#status').find('option[value="0"]').prop('selected', true) - 再
form.render('select') - HTML 中必须写
value="0"(字符串),不能写value=0(会被解析为空) - 动态插入时,确认
<option value="0">未启用</option>真的进了 DOM
别依赖 HTML 里的 selected 属性
静态页面里写 <option selected>上海</option> 是有效的,但只要调过 form.render() 或任何 JS 修改,Layui 就接管了状态,这个属性立刻失效。
哪怕你在初始化前就写了 selected,一旦后续 JS 触发过渲染,它就不再管用了——UI 状态只认 form.val() 或 DOM 的 value + form.render() 这一套。
最容易被忽略的点是:无论你怎么塞数据、怎么打属性,form.render('select') 这一步绝不能省。它不是“锦上添花”,而是让 Layui 主动读取当前 value 并高亮对应项的唯一指令。











