关于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 22 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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
php读取msn上的用户信息类
2008/12/05 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python中six模块基础用法
2019/12/08 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
北京振戎融通Java面试题
2015/09/03 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
客房部经理岗位职责
2015/02/02 职场文书