解决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 EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
jquery.post用法示例代码
Jan 03 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
Vue自定义多选组件使用详解
Sep 08 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python实现隐马尔科夫模型HMM
2018/03/25 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
python网络编程之五子棋游戏
2020/05/14 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
高职助产应届生自荐信
2013/09/24 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
教师节座谈会主持词
2015/07/03 职场文书
redis 查看所有的key方式
2021/05/07 Redis
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers