文档章节

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

yaosing
 yaosing
发布于 2016/06/28 16:45
字数 311
阅读 64
收藏 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
09/11
0
0
AngularDart Material Design 选择

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

scooplol
09/11
0
0
HTML标签大全(三)

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

andylhx
2014/05/09
0
0
html中接受用户输入的form表单定义方式

在使用html语言编写程序时,如果需要接受用户输入信息,可以通过form表单,将用户的键盘输入提交并传递值给相应的处理文件。 表单允许用户在常用表单(如:文本框、下拉列表、单选框、复选框...

wuwei5460
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

aws S3 util demo

package com.example.demo;import com.amazonaws.AmazonClientException;import com.amazonaws.AmazonServiceException;import com.amazonaws.auth.BasicAWSCredentials;import co......

经常把天聊死的胖子
8分钟前
1
0
我们知道CDN护航了双11十年,却不知道背后有那么多故事

摘要: 一路走来,文景也曾疑惑过:为什么我们不能把活动的时间跨度拉长到3天,或者1周呢?那样我们或许就不必冒着如此大的风险,承受日常峰值是10倍以上的压力啊!然而当他走到现在才深刻的...

阿里云官方博客
17分钟前
2
0
linux下查看cpu、memo、io、swap性能数据脚本

直接贴脚本: 1、cpu #!/bin/bashCurrentDate=`date -d today '+%Y%m%d'`CurrentTime=`date -d today '+%Y%m%d%H%M'`mytext="$CurrentTime\t`top -b -n 1 | grep Cpu\(s\......

郑加威
21分钟前
2
0
MySQL之——查询重复记录、删除重复记录方法大全

MySQL之——查询重复记录、删除重复记录方法大全

安小乐
24分钟前
1
0
spring容器启动,停止,关闭事件监听-ApplicationEvent

ApplicationEvent ApplicationEvent相当于一个事件,所有自定义事件都需要继承这个抽象类。在Eclipse中Ctrl+Shift+H调用类的层次结构列表,可以看到如下 Application下抽象子类ApplicationCo...

tantexian
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部