是否可以通过程序触发移动设备's的本地选择弹出窗口

Is it possible to programmatically trigger a mobile device's native select popup?

本文关键字：选择 窗口 程序 可以通过 移动 是否      更新时间：2023-09-26

当打开选择元素时，至少有些手机会显示原生弹出菜单，而不是默认下拉菜单。有没有一种方法可以在不使用select元素的情况下从Javascript手动触发选择弹出窗口？

我尝试过使用隐藏的select元素，并在需要用户进行选择时触发点击事件，但这似乎不起作用。

看起来确实有效的是使选择透明（opacity: 0），并将其覆盖在应该触发选择弹出的元素的顶部。然而，这感觉很粗糙，并且需要不必要的代码来保留悬停/单击功能。

试试这个：

<html>
<head>
    <style>
        html, body
        {
            margin  :0;
            padding :0;
        }
        .hiddenElem
        {
            position :absolute;
            top      :-1000px;
            left     :-1000px;
        }
    </style>
</head>
<body>
    <div class="hiddenElem">
        <select name="selectField" id="selectField">
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        setTimeout(function()
        {
            var element=$("#selectField")[0], worked=false;
            if(document.createEvent)
            {
                var e=document.createEvent("MouseEvents");
                e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                worked=element.dispatchEvent(e);
            }
            else if(element.fireEvent)
            {
                worked=element.fireEvent("onmousedown");
            }
            if(!worked)
            {
                alert("It didn't worked in your browser.");
            }
        }, 100);
    </script>
</body>
</html>

参考：如何使用jquery 打开选择输入

相关文章：