解决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 相关文章推荐
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
jquery实现图片切换代码
Oct 13 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
解决vue移动端适配问题
Dec 12 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
vue项目创建步骤及路由router
Jan 14 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
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
使用URL传输SESSION信息
2015/07/14 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
用js重建星际争霸
2006/12/22 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python仿抖音表白神器
2019/04/08 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
中专生的个人自我评价
2013/12/11 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
出纳担保书范文
2014/04/02 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
2014年保管员工作总结
2014/11/18 职场文书
导游词书写之黄山
2019/08/06 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
JS数组去重详情
2021/11/07 Javascript
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL