关于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获取当前日期时间及其它操作函数
Jan 11 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
Js nodeType 属性全面解析
2013/11/14 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
python实现socket端口重定向示例
2014/02/10 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Django实现简单的分页功能
2021/02/22 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
物流专业求职信
2014/06/30 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
个人委托书范本汇总
2014/10/01 职场文书
六查六看自查报告
2014/10/14 职场文书
2014全年工作总结
2014/11/27 职场文书
财务总监岗位职责
2015/02/03 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书