关于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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
jquery append与appendTo方法比较
May 24 jQuery
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
jQuery实现飞机大战小游戏
Jul 05 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删除文件夹的三种方法
2013/06/09 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
深入探讨前端框架react
2015/12/09 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
layui的select联动实现代码
2019/09/28 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python 私有函数的实例详解
2017/09/11 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
美国性感女装网站:bebe
2017/03/04 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
2014年公司庆元旦活动方案
2014/03/05 职场文书
营销团队口号
2014/06/06 职场文书
青年教师个人总结
2015/02/11 职场文书
七个Python必备的GUI库
2021/04/27 Python
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android