解决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代码
Oct 09 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
简单的网页广告特效实例
Aug 19 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
使用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
2006/12/14 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php 归并排序 数组交集
2011/05/10 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
onpropertypchange
2006/07/01 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
详解python做UI界面的方法
2019/02/27 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python