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使用问题的更多相关文章

  1. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  2. layui select配合input实现动态模糊搜索

    功能需求:select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能 html代码: 样式: <style> .select-search-i ...

  3. layui select 选完其他选项, 手工清空选项 又恢复最初的选项?

    启用layui的select  下拉搜索项: lay-search <div class="layui-inline"> <label class="l ...

  4. layui select 禁止点击

    $('select').attr('disabled', 'disabled'); form.render('select'); 注意事项: 1. 必须写 layui.use([form]) 2. 先 ...

  5. shit layui & select & re-render & bug

    shit layui https://www.layui.com/doc/modules/form.html#onselect https://www.layui.com/doc/element/fo ...

  6. layui select change

    <select lay-filter="test"></select> layui.use([ 'form'], function() { var form ...

  7. layui select 联动渲染赋值不了数据的问题

    今天用 layui做select的时候,数据老是看不到,而且联动的数据是对不上的,看了网上一堆是 最后要用 form.render('select'); 这个是必须的, 但是我用了还是这样,其实是la ...

  8. layui select动态添加option

    <form class="layui-form" action=""> <div class="layui-form-item pr ...

  9. 动态设置 layui select 为选中状态

    // 当前的select的id $('#type').val('你的value值'); //更新全部 layui.form.render();

随机推荐

  1. 项目Alpha冲刺(团队)-第二天冲刺

    格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:为了交项目干杯 作业目标:描述第二天冲刺的项目进展.问题困难.心得体会 ...

  2. LRU 实现缓存

    LRU:Least Recently used 最近最少使用 1.使用LinkedHashMap实现 inheritance实现方式 继承map类 可以使用Collections.synchroniz ...

  3. 高可用Redis(九):Redis Sentinel

    1.主从复制高可用的问题 主从复制高可用的作用 1.为master提供备份,当master宕机时,slave有完整的备份数据 2.对master实现分流,实现读写分离 但是主从架构有一个问题 1.如果 ...

  4. 定义一个javascript方法,实现对数组集合的正向排序

    function sortArr (arr) { var newArr = arr.map(val => parseInt(val)).sort((a, b) => a-b); newAr ...

  5. Jace 上新建 Station 配置 笔记

    1.Station站点的结构图 2.niagara 结构框架图 Niagara 系统的架构是围绕着“以组件(Component)为导向的编程”为核心设计的.组件(Component)是使用Java 编 ...

  6. PHP删除目录及目录下所有文件

    /** * 删除目录及目录下所有文件或删除指定文件 * @param str $path 待删除目录路径 * @param int $delDir 是否删除目录,1或true删除目录,0或false则 ...

  7. 从Jensen不等式到Minkowski不等式

    整理即证 参考资料: [1].琴生不等式及其加权形式的证明.Balbooa.https://blog.csdn.net/balbooa/article/details/79357839.2018.2 ...

  8. Emsemble

    RM # -*- coding: utf-8 -*- """ RandomForestClassifier 예 """ import pan ...

  9. FlaskWeb开发:基于Python的Web应用开发实战

    所属网站分类: 资源下载 > python电子书 作者:熊猫烧香 链接:http://www.pythonheidong.com/blog/article/63/ 来源:python黑洞网,专注 ...

  10. Analysis of Web.xml in Hello1 project

    一.web.xml文件介绍 The web.xml file contains several elements that are required for a Facelets applicatio ...