解决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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
react结合bootstrap实现评论功能
May 30 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
使用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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP自定义多进制的方法
2016/11/03 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
django 创建过滤器的实例详解
2017/08/14 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
设置器与访问器的定义以及各自特点
2016/01/08 面试题
结构工程研究生求职信
2013/10/13 职场文书
化学教学随笔感言
2014/02/19 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
小学运动会报道稿
2015/07/22 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
人民调解协议书
2016/03/21 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript