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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
ExtJS 入门
2010/10/29 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
小程序实现搜索框
2020/06/19 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
快速了解python leveldb
2018/01/18 Python
windows下python和pip安装教程
2018/05/25 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
python Selenium 库的使用技巧
2020/10/16 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
超市营业员岗位职责
2013/12/20 职场文书
先进个人获奖感言
2014/01/24 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
聚美优品励志广告词
2014/03/14 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书