关于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 concat数组累加 示例
Sep 03 Javascript
JavaScript Promise启示录
Aug 12 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
Vue实现菜单切换功能
Nov 08 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反射机制用法实例
2014/08/28 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
任命书模板
2014/06/04 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
复活读书笔记
2015/06/29 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA