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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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 5.0 Pear安装方法
2006/12/06 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
Python学习入门之区块链详解
2017/07/25 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python xpath获取页面注释的方法
2019/01/14 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
公司同意接收函
2014/01/13 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
数学教师个人总结
2015/02/06 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle