关于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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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面向对象概念
2011/11/06 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
详解vue中组件参数
2018/07/09 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python使用Pycharm创建一个Django项目
2018/03/05 Python
python3实现随机数
2018/06/25 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python JSON编解码方式原理详解
2020/01/20 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python可迭代对象去重实例
2020/05/15 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
电气自动化个人求职信范文
2014/02/03 职场文书
读书月活动方案
2014/05/22 职场文书
淘宝客服工作职责
2014/07/11 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Python 统计序列中元素的出现频度
2022/04/26 Python