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();
随机推荐
- gitlab 权限说明
五.权限说明 Guest(匿名用户) - 创建项目.写留言薄 Reporter(报告人)- 创建项目.写留言薄.拉项目.下载项目.创建代码片 段 Developer(开发者)- 创建项目.写留言薄.拉 ...
- 【easy】268. Missing Number
Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...
- go语言实现生产者-消费者
前言: 之前在学习操作系统的时候,就知道生产者-消费者,但是概念是模模糊糊的,好像是一直没搞明白. 其实很简单嘛,生产者生产,消费者进行消费,就是如此简单.了解了一下go语言的goroute,感觉实现 ...
- 实验1:C++简单程序设计(1)
实验目的 1. 掌握c++中类c部分的编程知识: 数据类型,常量,变量,运算符,表达式,分支结构,循环结构 2. 掌握C++中数据输入和输出的基本方法 3. 熟练使用c++程序开发环境,掌握c++程序 ...
- habse Region server挂掉
2019-04-28 15:57:28,355 INFO org.apache.hadoop.hbase.regionserver.HeapMemoryManager: heapOccupancyPe ...
- python单元测试框架unittest总结
unittest.TestCase:TestCase类,所有测试用例类继承的基本类. class BaiduTest(unittest.TestCase): TestCase类的属性如下: setUp ...
- MathType7.X链接:https://pan.baidu.com/s/1rQ5Cwk5_CC9UgvgaYPVCCg 提取码:6ojq 复制这段内容后打开百度网盘手机App,操作更方便哦完美解压,无限使用
最近在写论文的过程中使用到了MathType,但是由于MathType30天使用已经过期,有些特殊符号用不了,于是开始找各种破解版.好吧,花了整整两个小时才算搞定,真是一部血泪史,现在把安装破解教程贴 ...
- 末学者笔记--Linux权限管理
一.权限概述 Linux系统一般将文件可存/取访问的身份分为3个类别:owner(拥有者).group(和所有者同组的用户).others(其他人,除了所有者,除了同组的用户以及除了超级管理员),且3 ...
- 初探storm
Storm入门之Storm示例及UI参数讲解 Storm UI REST API Storm 1.1.0 中文文档 Apache Storm 1.1.0 中文文档 | ApacheCN Storm U ...
- anime.js 简单入门教程
anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...