layui问题之模拟select点击事件的实例讲解


Posted in Javascript onAugust 15, 2018

一、问题

不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变

二、经过

刚开始查看layui官方文档,发现仅仅只是有select监听事件,即:

form.on('select(filter)', function(data){
 console.log(data.elem); //得到select原始DOM对象
 console.log(data.value); //得到被选中的值
});

但是,这个事件需要操作页面,不可取。

三、结果

查看layui源码,关于select事件的实现,在form.js中,看实现的原理。自动触发select点击原理就是:

1、找到当前select的下一个div.layui-select-title节点的子元素,即input或者i,实现点击事件。

2、上一步骤完了之后,出现下拉框,但是下拉框还没有点击事件;需要再实现你想让下拉框里面的哪个值有点击事件。此时,需要通过select找到下拉框dl里面的dd的具体的值,然后实现点击事件。

这样就完整的实现了模拟select点击事件。

源码:

<!-- HTML -->
<select name="modules" lay-verify="required" lay-search="">
            <option value="">直接选择或搜索选择</option>
            <option value="1">layer</option>
            <option value="2">form</option>
            <option value="3">layim</option>
          </select>
// JS:
$('select[name="modules"]').next().find('.layui-select-title input').click();

$('select[name="modules"]').next().find('.layui-anim').children('dd[lay-value="20"]').click();

虽然实现了效果,实际上看不出来效果,加一个延迟就可以了:

// 优化后的js
$('select[name="modules"]').next().find('.layui-select-title input').click();

// 延迟3s再实现自动点击下拉框事件

setTimeout(function () {
          $('select[name="modules"]').next().find('.layui-anim').children('dd[lay-value="20"]').click();

},3000);

以上这篇layui问题之模拟select点击事件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
深入理解Vue router的部分高级用法
Aug 15 #Javascript
JS打印彩色菱形的实例代码
Aug 15 #Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 #Javascript
layui 优化button按钮和弹出框的方法
Aug 15 #Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 #Javascript
React+Webpack快速上手指南(小结)
Aug 15 #Javascript
You might like
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python常用模块介绍
2014/11/21 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
python实现k-means聚类算法
2018/02/23 Python
python实现按关键字筛选日志文件
2019/12/24 Python
幼儿园教师获奖感言
2014/03/11 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
论文答谢词
2015/01/20 职场文书
大雁塔英文导游词
2015/02/10 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
教师节座谈会主持词
2015/07/03 职场文书
大学生受助感言
2015/08/01 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android