文档章节

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

yaosing
 yaosing
发布于 2016/06/28 16:45
字数 311
阅读 58
收藏 0
点赞 0
评论 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
html中接受用户输入的form表单定义方式

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

wuwei5460
06/26
0
0
推荐 15 个 jQuery 选择框插件

jQuery Selectbox 插件可以让你创建漂亮和吸引眼球的选择框,用于替代浏览器自带的老旧的 HTML 选择框效果。本文向你推荐 15 个 jQuery 的选择框插件,可轻松集成到你的 Web 应用中。希望你能...

oschina
2015/07/03
44.8K
13
HTML标签大全(三)

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

andylhx
2014/05/09
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
帮助自定义选择框样式的Javascript - DropKick.js

来源:GBin1.com 在线演示 在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框莫属了。 我们可以使用CSS来给定一个...

gbin1
2013/08/30
424
0
前端-你要的炫酷下拉框Bootstrap-Select来了

断断续续,把流水统计模块做完了,今天正好上线了,主要供内部使用^^ 回头一想,虽然只是一个小功能,但是涉及到的部门和技术还不少呢。 和源库源表所在的组了解数据接口 找架构组,完成配置...

Jackie_Zheng
2017/08/30
0
0
HTML CSS之FORM

form 表单 常用于收集不同类用户的输入,允许用户收集:文本域(text)、下拉列表(select)、单选框(radio)、复选框(checkbox) 以及动按纽(Action) 表单标签 大多数表单标签都是input标签,...

zhangtainren
2015/12/04
0
0
html学习笔记

1,颜色 color:#930; 2,文字大小 font-size:15px; 3,文字居中 text-align:center 4,插图片链接 <img src="#"> 5,浏览器标题信息 <head> <title> </title></head>, 6,注释 <!-- -->, 7,......

LizRose
2015/12/30
16
0
web前端-HTML基础知识

Html介绍 1. 什么是html? Html是用来描述网页的一种语言。 l HTML 指的是超文本标记语言 (Hyper Text Markup Language) l HTML 不是一种编程语言,而是一种标记语言 (markup language) l 标记...

TroubleMakerLi
2017/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

expect脚本同步文件、expect脚本指定host和要同步的文件、构建文件分发系统

expect脚本同步文件 更改权限 执行脚本 查看执行结果 expect eof需要加上,作用是等脚本命令执行完再进行退出 expect脚本指定host和要同步的文件 更改权限,执行脚本 构建文件分发系统 需求背...

Zhouliang6
22分钟前
1
0
Hive应用:外部分区表

Hive应用:外部分区表 介绍 Hive可以创建外部分区表。创建表的时候,分区要在建表语句中体现。建完之后,你不会在表中看到数据,需要进行分区添加,使用alter语句进行添加。然后数据才会显示...

星汉
32分钟前
0
0
点击Enter登录

1. 效果 2. 实现过程(记得引入jq文件) //6.回车事件 登录 $(function() { document.onkeydown = function(event) { var e = event || window.event || arguments.callee.caller.arguments......

Lucky_Me
37分钟前
1
0
点击菜单内容切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .mao{ ......

南桥北木
今天
1
0
OSChina 周六乱弹 —— 妹子和游戏哪个更好玩

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享唐朝乐队的单曲《国际歌》 《国际歌》- 唐朝乐队 手机党少年们想听歌,请使劲儿戳(这里) @举个栗子- :日常祈雨 邪恶的大祭...

小小编辑
今天
494
6
流利阅读笔记32-20180721待学习

“人工智能”造假:只有人工,没有智能 Lala 2018-07-21 1.今日导读 当今社会,擅长单个方面的人工智能已经盛行,手机借助 AI 智慧防抖技术帮助大家拍出清晰照片,谷歌研发的 AI 助手将可以帮...

aibinxiao
今天
7
0
我的成长记录(一)

今天突然精神抖擞,在我的博客下新开一项分类>成长记录,专门记录每隔一段时间我的一点感悟吧。因为今天才专门花时间新开这样一个分类,所以以前有过的一些感悟没有记录下来,现在已经想不起...

dtqq
今天
1
0
机器学习管理平台 MLFlow

最近工作很忙,博客一直都没有更新。抽时间给大家介绍一下Databrick开源的机器学习管理平台-MLFlow。 谈起Databrick,相信即使是不熟悉机器学习和大数据的工程湿们也都有所了解,它由Spark的...

naughty
今天
12
0
idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
2
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部