文档章节

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

yaosing
 yaosing
发布于 2016/06/28 16:45
字数 311
阅读 62
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

中国发布域名系统基础软件 “红枫”

9月12日消息,域名工程中心(英文缩写 ZDNS)发布了宣称自主开发的域名系统基础软件 “红枫(Maple DNS)”。 9月12日消息,域名工程中心(英文缩写 ZDNS)发布了宣称自主开发的域名系统基础软...

问题终结者
29分钟前
1
0
Shell编程(分发系统介绍、expect远程登录、expect远程执行命令、expect传递参数)

分发系统介绍expect 分发系统expect即分发脚本,是一种脚本语言;通过他可以实现传输,输入命令(上线代码) 应用场景:业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者...

蛋黄_Yolks
34分钟前
1
0
Java Http请求工具类

public static String httpPost(String source, String params) {URL url = null;HttpURLConnection conn = null;OutputStream os = null;String ret = null;try {......

yuewawa
41分钟前
1
0
C++11 智能指针

C++11提供了三个智能指针,std::shared_ptr,std::unique_ptr,std::weak_ptr。最常用的是shared_ptr和unique_ptr。 (1)std::shared_ptr shared_ptr是共享指针,通过在控制块中增加引用计数...

yepanl
42分钟前
1
0
React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部