文档章节

HTML SELECT 标签自动显示下拉选项

yaosing
 yaosing
发布于 2016/06/28 16:45
字数 311
阅读 69
收藏 0

1.思路:

    当拿到这个问题的时候,第一个想法是百度(没啥鸟用,换谷歌吧)。没有找到解决办法。

然后开始尝试触发select的onclick事件, 依然没有鸟用。这时候我就开始想select标签的实现,

首先select标签之所以能显示下拉选项,它肯定默认是要监听某个鼠标事件的(你个逗比赞同吗?)。

那么好现在的问题就变成: 怎样找到那个该死的事件。

分析一下: select 标签显示下拉的选项的时候, 我们肯定是在select标签上点击了。

也就是说我们触发了MouseClick or MouseDown 事件。

现在问题简单了. mouse click 肯定不行(已经试过了)。

那么只有一个事件了 那就是MouseDown.

问题就这样解决了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Select</title>
</head>
<script type="text/javascript">

    function showOptions() {    
        var mouseEvent = new MouseEvent('mousedown',{
            'view': window,
            'bubbles': true,
            'cancelable': true
          });
        document.getElementById("test").dispatchEvent(mouseEvent);
    }

</script>
<body>
    <div>
        <input type="button" value="showOptions" onclick="showOptions()"/> 
        <select id="test">
            <option>1</option>
            <option>2</option>
        </select>
    </div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
yaosing
粉丝 0
博文 2
码字总数 311
作品 0
宿迁
程序员
私信 提问
struts2中,标签的使用

一、select原始生成下拉框的方法: <select class="form-control" name="user.roleId" > <option value="">--请选择--</option> <s:iterator value="roleList" var="role" > <option value="......

AnyLiem
2015/05/25
1K
0
AngularDart Material Design 下拉列表

MaterialDropdownSelectComponent Selector: <material-dropdown-select> Material Dropdown Select是按钮触发的下拉列表。 material-dropdown-select组件结合了material-select和material-......

scooplol
2018/09/11
0
0
AngularDart Material Design 选择

MaterialSelectComponent Selector: <material-select> 材料选择是用于从集合中选择项目的容器,使用复选图标标记所选选项。 可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以...

scooplol
2018/09/11
0
0
Jquery操作easy-ui表单

$("#id").combobox("select","value")//设置easy-ui下拉框的默认值是value $("#id").combobox("setValue","value")//为easy-ui下拉框的设置一个value值 $("#treecombobox").combobox("getVa......

CurtainRight
2015/11/07
0
0
HTML标签大全(三)

表单标记 ·C 代表 Close needed 表示该标记属于围堵标记,即需要结束标记 。 ·N 代表 No need to close 表示该标记属空标记,即不需要结束标记。 C 标签用于为用户输入创建 HTML 表单。 表...

andylhx
2014/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TiDB 3.0 Beta Release Notes

2019 年 1 月 19 日,TiDB 发布 3.0 Beta 版,对应 master branch 的 TiDB-Ansible。相比 2.1 版本,该版本对系统稳定性、优化器、统计信息以及执行引擎做了很多改进。 TiDB 新特性 支持 Vi...

TiDB
22分钟前
2
0
从拼多多优惠券事件看到的一些反思

本文由云+社区发表 作者:颜国平 摘要:最近几年,电商行业飞速发展,各种创业公司犹如雨后春笋大量涌现,商家通过各种活动形式的补贴来获取用户、培养用户的消费习惯,即将到来的“ 购物狂欢...

腾讯云加社区
23分钟前
4
0
记录一次BUG

1: 请求注册页面时生成一个UUID, 并且将UUID隐藏在页面中并且添加到session中去。 2: 发送短信时获取手机号和UUID,将两者发送至服务器 3: 先判断UUID和session中UUID是否一致。 不一致就...

专业写BUG的程序员
28分钟前
1
0
阿里云漏洞提示:phpMyAdmin <=4.8.1 checkPageValidity函数缺陷可导致GETSHELL

如题: phpMyAdmin <=4.8.1 后台checkPageValidity函数缺陷可导致GETSHELL 即:checkPageValidity函数对外部输入过滤不严,可导致本地包含任意文件。进一步地攻击者可通过注入代码到特定文件...

408582708
28分钟前
1
0
PyTorch可视化理解卷积神经网络

摘要: 神经网络工具像一个黑匣子,无法知道它的中间是如何处理的。本文使用图片加代码的形式讲解CNN网络,并对每层的输出进行可视化,便于初学者理解,可以动手实践下哦! 如今,机器已经能...

阿里云官方博客
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部