关于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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
刷新页面后让控制台的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图像处理类代码分享
2012/01/19 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
详解Bootstrap插件
2016/04/25 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
pandas中ix的使用详细讲解
2020/03/09 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
软件工程师面试题
2012/06/25 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
临时用工协议书范本
2014/10/29 职场文书
先进党支部申报材料
2014/12/24 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
详解Golang如何优雅的终止一个服务
2022/03/21 Golang