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 相关文章推荐
js获得地址栏?问号后参数的方法
Aug 08 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
用Python解数独的方法示例
2019/10/24 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python列表解析操作实例总结
2020/02/26 Python
python中shell执行知识点
2020/05/06 Python
工程业务员岗位职责
2013/12/31 职场文书
服装促销活动方案
2014/02/23 职场文书
班主任先进事迹材料
2014/12/17 职场文书
升职感谢信
2015/01/22 职场文书
个人求职意向书
2015/05/11 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python