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. Gitlab_ansible_jenkins三剑客②Gitlab的后台管理

    系统信息和日志 健康状态 使用gitlab的用户管理和审批功能 创建用户 创建一个lead普通账号 进入test-repo仓库 这样就把dev添加到了test-repo这个项目中,并且有了develo ...

  2. HTML 文本内容居中

    简单描述:使用bootstrap 的model弹出框,里边的标题内容是靠左的,想把内容居中. 操作:给标题的class加上"text-center". 另外 我发现,在使用mode ...

  3. CISPA Scyther tools

    1.Scyther软件作者网站的整理 Scyther工具的网站主页:https://people.cispa.io/cas.cremers/index.html 首先 对Scyther软件的资料进行整 ...

  4. windows10环境下的RabbitMQ安装步骤(图文)

    https://blog.csdn.net/weixin_39735923/article/details/79288578 记录下本人在win10环境下安装RabbitMQ的步骤,以作备忘. 第一步 ...

  5. Mybatis Mapper接口是如何找到实现类的-源码分析

    KeyWords: Mybatis 原理,源码,Mybatis Mapper 接口实现类,代理模式,动态代理,Java动态代理,Proxy.newProxyInstance,Mapper 映射,Map ...

  6. 语法之进化论之lambda表达式

    namespace 匿名函数 { /// <summary> /// 语法之进化论 /// </summary> class Program { delegate bool M ...

  7. 手把手教你从ESXI部署到vSphere web Client管理控制

    作为实验环境,一台物理机即可 既然是实验环境,那么首先把这个物理机装成ESXI6.5的宿主机并配置网络系统 第二步骤就是在ESXI上面导入OVF文件,注册一台虚机,作为数据管理中心 第三步骤就是基于这 ...

  8. python面试题之Python支持什么数据类型?

    所属网站分类: 面试经典 > python 作者:外星人入侵 链接:http://www.pythonheidong.com/blog/article/67/ 来源:python黑洞网,专注py ...

  9. pycharm的list中copy的应用

    #拷贝的意思 li = [11,22,33,44] v = li.copy() print(v) #输出结果 [11,22,33,44] #浅拷贝

  10. Flask速成项目:Flask实现计算机资源的实时监控

    很多人都说使用Python开发WEB应用非常方便,那么对于WEB新手来说,到底有多方便呢?本文即将展示给你Python的魔法. 本文将通过一个实例:Flask实现计算机资源的实时监控,迅速带你入门Fl ...