layui下select下拉框不显示或没有效果

最新推荐文章于 2024-07-14 23:42:27 发布

会写代码的心理师

最新推荐文章于 2024-07-14 23:42:27 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： java 数学建模开发语言

本文链接：https://blog.csdn.net/jorzen1984/article/details/131306645

layui的select下拉框遇到不显示或无响应的问题，可以通过以下步骤解决：1.确保表单父元素有'layui-form'类；2.正确引入并加载form模块；3.对动态插入的表单元素执行form.render()更新渲染；4.在弹层中同样需要更新渲染。确保这些步骤执行后，select下拉框和弹层中的表单元素将恢复正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui下select下拉框不显示或没有效果

弹层layer选择框没有样式_不可点击_渲染失效的解决办法

一、必须给表单体系所在的父元素加上 class="layui-form"

在一个容器中设定 class="layui-form" 来标识一个表单元素块，如果你不想用 form，你可以换成 div 等任何一个普通元素（推荐用 form）；记得要在外层容器中定义 class="layui-form"，form 模块才能正常工作。

<form class="layui-form">
    <!-- 这里是form里面的代码 输入框，选择框、复选框，单选框等等 -->
</form>

二、调用依赖加载模块：form

当你使用表单时，layui 会对 select、checkbox、radio 等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于 form 组件，所以你必须加载 form，并且执行一个实例；

在这之前，你需要保证引入 js 的路径是否正确，也就是要注意 layui 已经成功的引入进来。（这就是一个很明显的路径错误：Uncaught ReferenceError: layui is not defined）

layui.use('form', function(){
    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
});

三、更新渲染

有些时候，你的有些表单元素可能是动态插入的。这时 form 模块的自动化渲染是会对其失效的。虽然 layui 不支持双向绑定机制，但没有关系，你只需要执行 form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

参数（type）值	描述
select	刷新select选择框渲染
checkbox	刷新checkbox复选框（含开关）渲染
radio	刷新radio单选框框渲染

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

第二个参数：filter，为 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助该参数，对表单完成局部更新。

<!-- HTML 示例 -->
<div class="layui-form" lay-filter

最低0.47元/天解锁文章

200万优质内容无限畅学