关于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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
javascript 闭包疑问
Dec 30 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
刷新页面后让控制台的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
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python如何安装下载后的模块
2020/07/03 Python
如何在Shell脚本中使用函数
2015/09/06 面试题
预备党员党课思想汇报
2014/01/13 职场文书
模范家庭事迹材料
2014/02/10 职场文书
班风口号
2014/06/18 职场文书
花坛标语大全
2014/06/30 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
钱学森观后感
2015/06/04 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android