弹层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 获取到数据后 拼接 option 然后追加到 select 下拉选择框中,记得在最后更新渲染 form.render();

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

<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>

layui下拉选择框select不显示的更多相关文章

  1. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  2. selenium之 下拉选择框Select

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  3. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  4. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  5. ionic 下拉选择框中默认显示传入的参数

    开发过程当中遇到一个有趣的问题,如果我在第一个页面需要把 item { "ownerId" : 1 } 传递给第二个页面,并挂在$scope下 $scope.item = $sta ...

  6. 解决layui下拉选择框只能选择不能手动输入文字

    审查元素可以看到,layui的select下拉框是用input和div模拟出来的,所以,如下例子,我的解决方法是:$('.mySelect').find('input').removeAttr(&qu ...

  7. 【JavaScript&jQuery】单选框radio,复选框checkbox,下拉选择框select

    HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...

  8. Bootstrap系列 -- 15. 下拉选择框select【转发】

    <form role="form"> <div class="form-group"> <select class="f ...

  9. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

随机推荐

  1. 5款实用的jQuery验证码插件

    效果图 文档结构 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. HTML 标签:常规元素和空元素

    HTML标签分为空元素和常规元素 其中空元素是自关闭的,不需要成对地添加关闭标签. 空元素包括:img,input,textarea,select,br,hr,command,link,keygen, ...

  3. ios9.3.3版本下 document.execCommand("copy") 失败

    copyText()安卓,ios11,ios12都可用 ,并且不弹起输入键盘 // 复制copyText function copyText(text) { var input = document. ...

  4. Array.from()类数组转化为数组的用法

    类数组对象转化为数组 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr = Array.from(arrayLi ...

  5. HDU 2674

    0 <= N<=10^9 看到这个数据范围知道常规方法肯定做不出来. 不过一想想既然是mod2009,是不是只要其中含有一个2009,那么其结果一定是0了呢 说了这里思路,就是看什么时候出 ...

  6. poj1573

    题意:给出一个矩形,N,E,S,W分别代表进行移动的方向,如果走出矩形网格则输出经过的网格数,如果在矩形网格内循环,则输出没进入循环之前所走过的网格数和循环所经过的网格数: 思路:创建两个数组,一个字 ...

  7. java接口(interface)

    引入:抽象类是从多个类中抽象出来的模板,若要将这种抽象进行得更彻底,就得用到一种特殊的“抽象类”→ 接口; 例子: 生活中听说过的USB接口其实并不是我们所看到的那些插槽,而是那些插槽所遵循的一种规范 ...

  8. Intellij Idea更换主题

    <h1 class="title">Intellij Idea更换主题</h1> <!-- 作者区域 --> <div class=&qu ...

  9. win10 uwp 商业游戏 1.1.5

    本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...

  10. C语言动态内存

    动态分配内存的概述 在数组一章中,介绍过数组的长度是预先定义好的,在整个程序中固定不变,但是在实际的编程中,往往会发生这种情况,即所需内存空间取决于实际输入的数据,而无法预先确定.为了解决上述问题,c ...