解决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 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
pytorch实现查看当前学习率
2020/06/24 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
nohup的用法
2014/08/10 面试题
好听的队名和口号
2014/06/09 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
工作年限证明模板
2014/11/01 职场文书
心灵捕手观后感
2015/06/02 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
MySQL 可扩展设计的基本原则
2021/05/14 MySQL