关于layui 下拉列表的change事件详解


Posted in Javascript onSeptember 20, 2019

默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可。

如:<select lay-filter="test"></select>

监听select

下拉选择框被选中时触发,回调函数返回一个object参数,携带两个成员:

注意:form.render('select');渲染一下 不然你的操作还是不生效 select不是选择器 表示渲染下拉列表 不写表示所有表单都渲染

语法如下

form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
form.on('select(search_type)', function(data){
  var html_one='<option value="1">充值</option><option value="2">还本付息</option>';
  if(data.value == 1){
    $("#search_detail").html(html_one);
    form.render('select');
  }else if(data.value == 2){
    var html_two='<option value="3">提现</option><option value="4">购买产品</option>';
    $("#search_detail").html(html_two);
    form.render('select');//select是固定写法 不是选择器
  }

});

上图的search_type就是下拉列表的lat-filter参数的值

lay-filter="search_type"

关于layui 下拉列表的change事件详解

以上这篇关于layui 下拉列表的change事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
ionic3 懒加载
Aug 16 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 #Javascript
layui动态绑定事件的方法
Sep 20 #Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 #Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 #Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 #Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 #Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 #Javascript
You might like
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python 代码运行时间获取方式详解
2020/09/18 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
个人求职信范文分享
2014/01/06 职场文书
公司培训欢迎词
2014/01/10 职场文书
美容院营销方案
2014/03/05 职场文书
大学毕业生自我评价
2015/03/02 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python