Layui select 无原生 placeholder,需用 value="" 的首项模拟;开启 lay-search 后该选项仍显示,无法隐藏;可用 formSelects 插件配置 placeholder 字符串实现搜索框提示,或用绝对定位 DOM 覆盖方案同步状态。

layui select 的 placeholder 不是原生 placeholder 属性
它根本不认 placeholder="xxx" 这种写法。Layui 下拉框的“默认提示文字”本质是首项 <option value="">请选择</option>,value 必须严格为空字符串,不能是空格、" "、"null" 或 undefined。如果你直接给 <select> 加了 placeholder 属性,浏览器忽略,Layui 也完全不读取——这行代码等于没写。
用了 lay-search 后空 option 仍显示在下拉列表顶部
这是 Layui 的设计行为,不是 bug。开启 lay-search 后,那个 value="" 的占位项依然会出现在搜索结果里(排第一),无法通过配置隐藏。常见错误是试图用 CSS 隐藏 .layui-select-group dd:nth-child(1),但容易误伤其他项或失效。
- 真正可控的做法:改用第三方插件如
formSelects,它支持placeholder: '请输入关键词'配置项,且该文字只显示在搜索输入框内,不影响下拉列表 - 若坚持用原生
lay-search,又不想让用户看到“请选择”,只能放弃空option,转而用绝对定位模拟提示文字(见下一条) - 注意:动态填充选项后必须调用
form.render("select", "yourFilter"),否则新插入的option不生效,placeholder 看不见
没有空 option 时怎么用 CSS 模拟 placeholder 效果
当业务强制要求 <select> 初始为空(连 <option value=""> 都不允许存在),就得靠 DOM 覆盖。关键不是“加个 div”,而是同步状态:
- 外层容器设
position: relative,内部放一个<div class="placeholder">请选择账号</div>,用position: absolute叠在select上方 -
pointer-events: none必须加,否则点击穿透失败,用户点不到下拉箭头 - 监听
change事件:选中有效值时hide()提示文字;清空(比如用 JS 设select.value = "")时再show() - Layui 2.5.6 及更早版本对
disabled处理不一致,模拟时要同步控制select.disabled和提示文字的opacity,否则禁用状态下提示还可见
formSelects 插件里 placeholder 怎么配才生效
它比原生方案简单直接,但有硬性前提:
- 必须先
layui.use(["formSelects"]),且formSelects.render()不能在 DOM 就绪前调用,否则placeholder字段被忽略 - 配置项写法是
placeholder: "请输入关键词",类型必须是字符串,不能是函数(placeholder: () => "xxx"会静默失效) - 如果同时开了
search: true,这个placeholder只作用于搜索输入框,下拉列表本身不显示任何占位文本 - 验证失败时,
formSelects默认不触发提示;如需联动表单校验,得手动在onSuccess里调form.verify()
最常被忽略的是:placeholder 是否显示,取决于你用的是哪个组件。原生 select 没有真正的 placeholder,formSelects 有但只管搜索框,而自定义定位方案要自己扛状态同步——选错路径,调试半天也看不到那行字。


















