layui select使用问题
1.需要引用form模板
layui.use(['form'], function () {
var form = layui.form;
});
2.html代码
<div class="layui-form">
<select name="city" lay-verify="" lay-filter="test" id="select">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
注:当需要动态生成select选项时,如果没有layui的下拉效果,需要在生成完dom结构之后form.render();一下,重新渲染。这里的form是第1点模板中的form变量。
如果还没有效果,注意是不是没有在外层嵌套div.layui-form
3.获取select值
像平时获取select值就可以了。例如$("#select").val();
4.select赋值
也是像平时一样select赋值就行。例如$("#select").val(”010“);
5.select的change事件
需要在select标签上增加lay-filter="test",test可以随意命名。
form.on('select(test)', function (data) {
//TODO执行自己的代码
});
注:select(test)里面的test和lay-filter的值一样即可。
6.遇到的问题
问题描述:在layer弹框中,如果使用parent.layer.open()弹出一个弹框,之后success回调渲染select,select没有效果。
layui select使用问题的更多相关文章
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
- layui select配合input实现动态模糊搜索
功能需求:select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能 html代码: 样式: <style> .select-search-i ...
- layui select 选完其他选项, 手工清空选项 又恢复最初的选项?
启用layui的select 下拉搜索项: lay-search <div class="layui-inline"> <label class="l ...
- layui select 禁止点击
$('select').attr('disabled', 'disabled'); form.render('select'); 注意事项: 1. 必须写 layui.use([form]) 2. 先 ...
- shit layui & select & re-render & bug
shit layui https://www.layui.com/doc/modules/form.html#onselect https://www.layui.com/doc/element/fo ...
- layui select change
<select lay-filter="test"></select> layui.use([ 'form'], function() { var form ...
- layui select 联动渲染赋值不了数据的问题
今天用 layui做select的时候,数据老是看不到,而且联动的数据是对不上的,看了网上一堆是 最后要用 form.render('select'); 这个是必须的, 但是我用了还是这样,其实是la ...
- layui select动态添加option
<form class="layui-form" action=""> <div class="layui-form-item pr ...
- 动态设置 layui select 为选中状态
// 当前的select的id $('#type').val('你的value值'); //更新全部 layui.form.render();
随机推荐
- 项目Alpha冲刺(团队)-第二天冲刺
格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:为了交项目干杯 作业目标:描述第二天冲刺的项目进展.问题困难.心得体会 ...
- LRU 实现缓存
LRU:Least Recently used 最近最少使用 1.使用LinkedHashMap实现 inheritance实现方式 继承map类 可以使用Collections.synchroniz ...
- 高可用Redis(九):Redis Sentinel
1.主从复制高可用的问题 主从复制高可用的作用 1.为master提供备份,当master宕机时,slave有完整的备份数据 2.对master实现分流,实现读写分离 但是主从架构有一个问题 1.如果 ...
- 定义一个javascript方法,实现对数组集合的正向排序
function sortArr (arr) { var newArr = arr.map(val => parseInt(val)).sort((a, b) => a-b); newAr ...
- Jace 上新建 Station 配置 笔记
1.Station站点的结构图 2.niagara 结构框架图 Niagara 系统的架构是围绕着“以组件(Component)为导向的编程”为核心设计的.组件(Component)是使用Java 编 ...
- PHP删除目录及目录下所有文件
/** * 删除目录及目录下所有文件或删除指定文件 * @param str $path 待删除目录路径 * @param int $delDir 是否删除目录,1或true删除目录,0或false则 ...
- 从Jensen不等式到Minkowski不等式
整理即证 参考资料: [1].琴生不等式及其加权形式的证明.Balbooa.https://blog.csdn.net/balbooa/article/details/79357839.2018.2 ...
- Emsemble
RM # -*- coding: utf-8 -*- """ RandomForestClassifier 예 """ import pan ...
- FlaskWeb开发:基于Python的Web应用开发实战
所属网站分类: 资源下载 > python电子书 作者:熊猫烧香 链接:http://www.pythonheidong.com/blog/article/63/ 来源:python黑洞网,专注 ...
- Analysis of Web.xml in Hello1 project
一.web.xml文件介绍 The web.xml file contains several elements that are required for a Facelets applicatio ...