Layui下拉选择框如何动态加载后端API数据-Layui教程-PHP中文网

必须手动调用 form.render('select')，因 layui 不自动监听 select 内部 html 变化；动态加载后需用 form.val() 设置默认值；远程搜索应选 formselects 等插件而非硬套原生 select。

直接用 $.get 或 $.ajax 拉数据、拼 <option></option>、再调 form.render('select') 就能跑通，但容易在“渲染时机”“默认选中”“搜索联动”这三处掉坑里。

为什么 form.render('select') 必须手动调？

Layui 不会自动监听 <select></select> 内部 HTML 的变化。你用 jQuery 的 .html() 或 .append() 更新了选项，DOM 是变了，但 Layui 的美化层（那个带箭头的下拉面板）还是旧的，用户点开看到的仍是初始内容。

低版本 Layui（如 2.5.x）必须显式写 form.render('select')
高版本（2.8+）可简写为 form.render()，但指定类型更稳妥
别在 success 回调外调用 —— 数据还没回来就 render，等于白干

动态加载后如何默认选中某一项？

不能只改 <option selected></option>，Layui 渲染后这个属性会被忽略。得在 form.render() 之后再赋值。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

推荐用 form.val('form-filter', { 'field-name': 'value' })，它会同步更新原始 <select></select> 和美化层显示
如果没设 form 的 lay-filter，form.val() 会失效，必须补上
用 $('#id').val('xxx').trigger('change') 是无效的，Layui 不响应原生 change 事件

远程搜索下拉框（带输入过滤）怎么不卡顿？

原生 <select></select> 不支持输入搜索，得换方案。Layui 官方 Dropdown 组件或第三方 formSelects 插件是主流选择，别硬套 select + input 自己实现。

formSelects 支持 search: true，输入时自动发请求，返回数组后自动更新下拉项
自己用 input + dl 模拟，要注意防抖（setTimeout 清上一次请求）、节流（避免连打触发多次）、loading 状态提示
后端接口必须支持 keyword 参数，且返回结构要匹配插件要求（比如 formSelects 要 {name: 'xx', value: 'yy'}）

最常被忽略的是：动态加载的数据若含特殊字符（如单引号、双引号、），直接拼 <option></option> 字符串会破坏 HTML 结构，导致渲染失败或 XSS 风险。务必用 document.createElement 或模板引擎（如 laytpl）做转义，或者后端返回时已做 HTML 编码。