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 权限说明

    五.权限说明 Guest(匿名用户) - 创建项目.写留言薄 Reporter(报告人)- 创建项目.写留言薄.拉项目.下载项目.创建代码片 段 Developer(开发者)- 创建项目.写留言薄.拉 ...

  2. 【easy】268. Missing Number

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  3. go语言实现生产者-消费者

    前言: 之前在学习操作系统的时候,就知道生产者-消费者,但是概念是模模糊糊的,好像是一直没搞明白. 其实很简单嘛,生产者生产,消费者进行消费,就是如此简单.了解了一下go语言的goroute,感觉实现 ...

  4. 实验1:C++简单程序设计(1)

    实验目的 1. 掌握c++中类c部分的编程知识: 数据类型,常量,变量,运算符,表达式,分支结构,循环结构 2. 掌握C++中数据输入和输出的基本方法 3. 熟练使用c++程序开发环境,掌握c++程序 ...

  5. habse Region server挂掉

    2019-04-28 15:57:28,355 INFO org.apache.hadoop.hbase.regionserver.HeapMemoryManager: heapOccupancyPe ...

  6. python单元测试框架unittest总结

    unittest.TestCase:TestCase类,所有测试用例类继承的基本类. class BaiduTest(unittest.TestCase): TestCase类的属性如下: setUp ...

  7. MathType7.X链接:https://pan.baidu.com/s/1rQ5Cwk5_CC9UgvgaYPVCCg 提取码:6ojq 复制这段内容后打开百度网盘手机App,操作更方便哦完美解压,无限使用

    最近在写论文的过程中使用到了MathType,但是由于MathType30天使用已经过期,有些特殊符号用不了,于是开始找各种破解版.好吧,花了整整两个小时才算搞定,真是一部血泪史,现在把安装破解教程贴 ...

  8. 末学者笔记--Linux权限管理

    一.权限概述 Linux系统一般将文件可存/取访问的身份分为3个类别:owner(拥有者).group(和所有者同组的用户).others(其他人,除了所有者,除了同组的用户以及除了超级管理员),且3 ...

  9. 初探storm

    Storm入门之Storm示例及UI参数讲解 Storm UI REST API Storm 1.1.0 中文文档 Apache Storm 1.1.0 中文文档 | ApacheCN Storm U ...

  10. anime.js 简单入门教程

    anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...