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="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不显示的更多相关文章
- Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- selenium之 下拉选择框Select
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
- HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
- Bootstrap系列 -- 15. 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
- ionic 下拉选择框中默认显示传入的参数
开发过程当中遇到一个有趣的问题,如果我在第一个页面需要把 item { "ownerId" : 1 } 传递给第二个页面,并挂在$scope下 $scope.item = $sta ...
- 解决layui下拉选择框只能选择不能手动输入文字
审查元素可以看到,layui的select下拉框是用input和div模拟出来的,所以,如下例子,我的解决方法是:$('.mySelect').find('input').removeAttr(&qu ...
- 【JavaScript&jQuery】单选框radio,复选框checkbox,下拉选择框select
HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...
- Bootstrap系列 -- 15. 下拉选择框select【转发】
<form role="form"> <div class="form-group"> <select class="f ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
随机推荐
- 5款实用的jQuery验证码插件
效果图 文档结构 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- HTML 标签:常规元素和空元素
HTML标签分为空元素和常规元素 其中空元素是自关闭的,不需要成对地添加关闭标签. 空元素包括:img,input,textarea,select,br,hr,command,link,keygen, ...
- ios9.3.3版本下 document.execCommand("copy") 失败
copyText()安卓,ios11,ios12都可用 ,并且不弹起输入键盘 // 复制copyText function copyText(text) { var input = document. ...
- Array.from()类数组转化为数组的用法
类数组对象转化为数组 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr = Array.from(arrayLi ...
- HDU 2674
0 <= N<=10^9 看到这个数据范围知道常规方法肯定做不出来. 不过一想想既然是mod2009,是不是只要其中含有一个2009,那么其结果一定是0了呢 说了这里思路,就是看什么时候出 ...
- poj1573
题意:给出一个矩形,N,E,S,W分别代表进行移动的方向,如果走出矩形网格则输出经过的网格数,如果在矩形网格内循环,则输出没进入循环之前所走过的网格数和循环所经过的网格数: 思路:创建两个数组,一个字 ...
- java接口(interface)
引入:抽象类是从多个类中抽象出来的模板,若要将这种抽象进行得更彻底,就得用到一种特殊的“抽象类”→ 接口; 例子: 生活中听说过的USB接口其实并不是我们所看到的那些插槽,而是那些插槽所遵循的一种规范 ...
- Intellij Idea更换主题
<h1 class="title">Intellij Idea更换主题</h1> <!-- 作者区域 --> <div class=&qu ...
- win10 uwp 商业游戏 1.1.5
本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...
- C语言动态内存
动态分配内存的概述 在数组一章中,介绍过数组的长度是预先定义好的,在整个程序中固定不变,但是在实际的编程中,往往会发生这种情况,即所需内存空间取决于实际输入的数据,而无法预先确定.为了解决上述问题,c ...