HTML SELECT 标签自动显示下拉选项
博客专区 > yaosing 的博客 > 博客详情
HTML SELECT 标签自动显示下拉选项
yaosing 发表于1年前
HTML SELECT 标签自动显示下拉选项
  • 发表于 1年前
  • 阅读 33
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 需求:当点击button的时候自动显示html <select>标签的所有选项。 只在chrome下做了测试。

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>

标签: javascript html
共有 人打赏支持
粉丝 0
博文 2
码字总数 311
×
yaosing
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: