关于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 组件之旅(二)编码实现和算法
Oct 28 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
爬虫利器Puppeteer实战
Jan 09 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
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python 学习笔记
2008/12/27 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
市场营销计划书
2015/01/17 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Python字符串常规操作小结
2022/04/03 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js