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 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
php 小乘法表实现代码
2009/07/16 PHP
PHP 图片上传代码
2011/09/13 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
Joomla开启SEF的方法
2016/05/04 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
JavaScript中获取时间的函数集
2016/08/16 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
关于Python错误重试方法总结
2021/01/03 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
个人考核材料
2014/05/15 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
超市员工辞职信范文
2015/05/12 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server