解决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 相关文章推荐
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 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/06/14 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
window.open的功能全解析
2006/10/10 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
分享python数据统计的一些小技巧
2016/07/21 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
图解Python变量与赋值
2018/04/03 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
中间件分为哪几类
2016/09/18 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
董事长岗位职责
2013/11/30 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2015年招生工作总结
2015/05/04 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记