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.tmpl JQuery模板插件
Oct 10 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
js正则表达式校验指定字符串的方法
Jul 23 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
js实现扫雷源代码
Nov 27 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
JSON在PHP中的应用介绍
2012/09/08 PHP
深入php多态的实现详解
2013/06/09 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Python是编译运行的验证方法
2015/01/30 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
法学专业个人求职信
2013/09/26 职场文书
大学生求职简历的自我评价范文
2013/10/12 职场文书
银行会计业务的个人自我评价
2013/11/02 职场文书
车辆转让协议书
2014/04/15 职场文书
品质标语大全
2014/06/21 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
群众路线剖析材料
2014/09/30 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015年财政局工作总结
2015/05/21 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
AngularJS实现多级下拉框
2022/03/25 Javascript