解决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解决iframe高度自适应代码
Dec 20 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 分页类实现代码
2009/12/03 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
python中的yield使用方法
2014/02/11 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python反编译学习之字节码详解
2019/05/19 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
中学生家长评语大全
2014/04/16 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
优秀员工推荐材料
2014/12/20 职场文书
个性发展自我评价2015
2015/03/09 职场文书