layui如何根据ID自动选中对应的下拉项

作者：袖梨 2026-08-22

直接设置select的value再调用form.render("select")即可生效，前提是DOM已渲染且对应option存在；否则因Layui隐藏原生select、用自定义结构模拟下拉，仅改原生value无法同步UI。

直接设置 select 的 value，再调用 form.render('select') 即可生效 —— 但前提是 DOM 已渲染、选项已存在，否则选中无效。

为什么 $("#xxx").val(id) 有时不生效？

因为 Layui 会把原生 select 隐藏，用自定义结构（div.layui-form-select + dl + dd）模拟下拉；直接改原生 select 的 value，UI 不会同步更新。

常见错误现象：$("#edit_exam_school").val(2) 执行了，但界面上仍显示“请选择”
根本原因：选项是异步加载的（比如 AJAX 获取城市列表），val() 调用时 option 还没插入 DOM，或 form.render() 没触发
正确时机：必须在 $.each 追加完 option 之后、且 form.render('select') 完成后再设值

动态加载后设置默认选中（推荐做法）

这是最稳定、兼容性最好的方式，适用于所有 Layui 2.x 版本。

先清空并追加 option，确保目标 value 对应的 option 已存在
调用 $("#selectId").val(data.schoolId) 设置原生值
立即执行 form.render('select', 'your-form-filter') 或 form.render('select') 刷新 UI
注意：如果表单有 lay-filter，建议显式传入第二个参数，避免影响其他 select

$.ajax({url: '/api/schools',success: function(data) {var $sel = $('#edit_exam_school');$sel.empty().append('<option value="">请选择</option>');$.each(data, function(i, item) {$sel.append('<option value="' + item.id + '">' + item.name + '</option>');});$sel.val(2); // 设定默认值layui.form.render('select', 'editForm'); // 刷新指定 filter 的 select}});

已渲染但选项未加载完成时的兜底方案

极少数场景（如选项由 JS 动态生成但未等 form.render 完成就设值），可用 DOM 模拟点击方式强制触发 UI 更新。

原理：Layui 的可见下拉项实际是 dd[lay-value="2"]，点击它等价于用户手动选择
写法：$('#edit_exam_school').siblings('.layui-form-select').find('dd[lay-value="2"]').click()
风险：依赖 Layui 内部 DOM 结构（layui-form-select → dl → dd），Layui 3.0 若重构可能失效
仅建议作为临时补救，不用于生产环境主逻辑