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_ansible_jenkins三剑客②Gitlab的后台管理
系统信息和日志 健康状态 使用gitlab的用户管理和审批功能 创建用户 创建一个lead普通账号 进入test-repo仓库 这样就把dev添加到了test-repo这个项目中,并且有了develo ...
- HTML 文本内容居中
简单描述:使用bootstrap 的model弹出框,里边的标题内容是靠左的,想把内容居中. 操作:给标题的class加上"text-center". 另外 我发现,在使用mode ...
- CISPA Scyther tools
1.Scyther软件作者网站的整理 Scyther工具的网站主页:https://people.cispa.io/cas.cremers/index.html 首先 对Scyther软件的资料进行整 ...
- windows10环境下的RabbitMQ安装步骤(图文)
https://blog.csdn.net/weixin_39735923/article/details/79288578 记录下本人在win10环境下安装RabbitMQ的步骤,以作备忘. 第一步 ...
- Mybatis Mapper接口是如何找到实现类的-源码分析
KeyWords: Mybatis 原理,源码,Mybatis Mapper 接口实现类,代理模式,动态代理,Java动态代理,Proxy.newProxyInstance,Mapper 映射,Map ...
- 语法之进化论之lambda表达式
namespace 匿名函数 { /// <summary> /// 语法之进化论 /// </summary> class Program { delegate bool M ...
- 手把手教你从ESXI部署到vSphere web Client管理控制
作为实验环境,一台物理机即可 既然是实验环境,那么首先把这个物理机装成ESXI6.5的宿主机并配置网络系统 第二步骤就是在ESXI上面导入OVF文件,注册一台虚机,作为数据管理中心 第三步骤就是基于这 ...
- python面试题之Python支持什么数据类型?
所属网站分类: 面试经典 > python 作者:外星人入侵 链接:http://www.pythonheidong.com/blog/article/67/ 来源:python黑洞网,专注py ...
- pycharm的list中copy的应用
#拷贝的意思 li = [11,22,33,44] v = li.copy() print(v) #输出结果 [11,22,33,44] #浅拷贝
- Flask速成项目:Flask实现计算机资源的实时监控
很多人都说使用Python开发WEB应用非常方便,那么对于WEB新手来说,到底有多方便呢?本文即将展示给你Python的魔法. 本文将通过一个实例:Flask实现计算机资源的实时监控,迅速带你入门Fl ...