关于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为textarea添加maxlength属性的代码
Apr 07 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
Javascript动画效果(1)
Oct 11 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php开发文档 会员收费1期
2012/08/14 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python if not in 多条件判断代码
2016/09/21 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
wxPython实现文本框基础组件
2019/11/18 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python能做哪方面的工作
2020/06/15 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
餐厅筹备计划书
2014/04/25 职场文书
品德评语大全
2014/05/05 职场文书
招商引资工作汇报
2014/10/28 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
毕业证明模板
2015/06/19 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
为什么RedisCluster设计成16384个槽
2021/09/25 Redis