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

您所在的位置：网站首页 › 下拉框改了格式点不了怎么办 › layui下拉选择框select不显示或没有效果

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

2023-12-26 11:57| 来源: 网络整理| 查看: 265

Layui弹层layer中select没CSS样式或渲染失效的解决方法

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

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

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

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

layui.use('form', function(){ var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功 //…… //但是，如果你的HTML是动态生成的，自动渲染就会失效 //因此你需要在相应的地方，执行下述方法来进行渲染 form.render(); });

三、更新渲染

有些时候，你的有些表单元素可能是动态插入的。这时 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="" 的值。你可以借助该参数，对表单完成局部更新。

… … layui.use('form', function(){ var form = layui.form, form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态 form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态 //…… });

四、弹层中同样的原理，需要更新渲染

复选框开关关开关开立即提交 layui.use('form', function(){ var form = layui.form, $ = layui.$; //layer示例 layer.open({ type: 1, title: ['董先生的CSDN博客'], shade: 0.4, area:['900px', '650px'], content: $("#layer-test").html(), success: function(layero, index){ form.render(); } }); });

本文地址：https://blog.csdn.net/qq6759/article/details/101163692转载请注明出处

【本文地址】

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

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

今日新闻

推荐新闻