解决layui下拉框监听问题(监听不到值的变化)


Posted in Javascript onSeptember 28, 2019

关于layui监听下拉框值得变化,大家都知道官方文档给我们提供了一个方法

form.on('select(demo)',function(data){
 console.log(data.value)//打印当前select选中的值
})

按照我之前的理解,监听下拉框值得变化,就是只有下拉框的值发生了改变,才会触发这个事件,否则就不触发。但是这个方法是,只要你鼠标点击了下拉选项里面的值,不论这个值跟之前的值是否相等,都会触发这个事件。

下面说一下我的解决办法

1.首先,我写了一个input框,用来存放select当前选择的value值(这个时候不知道大家是不是跟我想的一样,只要监听这个input框中值得变化不就可以了么,答案是不行。因为动态赋值操作无法触发input的change事件)

2.代码写一下,自己理解

//input值发生变化事件
$(input).on('change',function(){
 console.log('layui下拉框的值发生了变化');
})
 
 
form.on('select(demo)',function(data){
 //判断当前选中的值是否跟input的值相等,相等的话,就不发生change事件,需要注意的是要先判断再赋值
 var inputVal = $(input).val();
 if(data.value !== inputVal ){
  $(input).change();
 }
 $(input).val(data.value)
})

以上这篇解决layui下拉框监听问题(监听不到值的变化)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 #Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 #Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 #Javascript
使用layer模态框给新页面传值的方法
Sep 27 #Javascript
JavaScript实现随机五位数验证码
Sep 27 #Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 #Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 #Javascript
You might like
体育彩票排列三组选三算法分享
2014/03/07 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
XML的代替者----JSON
2007/07/21 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
求职简历的自我评价
2014/01/31 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
会议开幕词
2015/01/28 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Django rest framework如何自定义用户表
2021/06/09 Python
Redis过期数据是否会被立马删除
2022/07/23 Redis