关于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面向对象之二 命名空间
Feb 08 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP 创建标签云函数代码
2010/05/26 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
python控制台英汉汉英电子词典
2020/04/23 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
中学教师实习自我鉴定
2013/09/28 职场文书
中文系师范生自荐信
2013/10/01 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js