解决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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
显示、隐藏密码
2006/07/01 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
Servlet方面面试题
2016/09/28 面试题
民事诉讼代理委托书
2014/10/08 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js