一, 问题
不操作页面, 实现模拟 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);
来源: http://www.jb51.net/article/145712.htm