弹层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="test1"> …</div> <div class="layui-form" lay-filter="test2"> …</div><!-- JS 示例 --><script>layui.use('form', function(){ var form = layui.form, form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态 form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态 //……});</script>
注意：如果是动态添加的select，可能是ajax获取select拼接option然后追加到form表单中的话，记得在最后再更新渲染，不明白的话可以参照这篇：
四、弹层中同样的原理，需要更新渲染
<div id="layer-test" style="display: none;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">行业类型</label> <div class="layui-input-block"> <select name="industry" id="industry" lay-filter="industry"> <option value>选择行业类型</option> <option value="1001">IT服务</option> <option value="1002">制造业</option> <option value="1003">批发/零售</option> <option value="1004">生活服务</option> </select> </div> </div> </form></div><script src="layui/layui.js"></script><script>layui.use('form', function(){ var form = layui.form, $ = layui.$; //layer示例 layer.open({ type: 1, title: ['弹层示例'], shade: 0.4, area:['900px', '650px'], content: $("#layer-test").html(), success: function(layero, index){ // 重新渲染弹层中的下拉选择框select form.render('select'); } });});</script>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
