关于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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
javascript使用链接跨域下载图片
Nov 01 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python线程join方法原理解析
2020/02/11 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
银行学习十八大感想
2014/01/11 职场文书
爱情检讨书大全
2014/01/21 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
财务管理专业求职信
2014/06/11 职场文书
公司感恩节活动策划书
2014/10/11 职场文书