jQuery Mobile 在按钮单击事件上显示本机选择菜单答案

【问题标题】：jQuery Mobile show native select menu on a button click eventjQuery Mobile 在按钮单击事件上显示本机选择菜单
【发布时间】：2015-08-12 23:13:58
【问题描述】：

是否可以通过按钮单击事件在移动设备上打开本机选择菜单？如果需要，可以有一个隐藏的选择菜单。

我知道可能还有其他方法，例如使用面板小部件。只是想知道这种方法是否可行并且以前有人做过。

提前致谢。

http://jsfiddle.net/pengyanb/8fkg0vpu/8/

$('#needToOpenANativeSelectMenu').click(function(){
	//what to do to open up a native select menu?
});

<div data-role="page" id="panelAdminPage" data-theme="a" backPageId="">
    <!-header-->
    <div data-role="header" data-position="fixed"> 
         <h5 id="papHeader">Example Menu</h5>
        <a id="needToOpenANativeSelectMenu" class="ui-btn ui-btn-right ui-icon-bars ui-btn-icon-notext ui-corner-all"></a>
    </div> 
    <div data-role="main" class="ui-content" data-theme="b">
        <h2>Is is possible to open up a native select menu on mobile device like what the "Example Menu" does with a button (button on the top right corner)?</h2>
        <label for ="selectMenu">Example Menu:</label>
        <select id="selectMenu">
            <option value="op1">Option 1</option>
            <option value="op2">Option 2</option>
            <option value="op3">Option 3</option>
        </select>
    </div>

</div>

【问题讨论】：

标签： cordova jquery-mobile

【解决方案1】：

是的，您可以在设备中使用trigger()。

$('#needToOpenANativeSelectMenu').click(function(){ 
     $('#selectMenu').trigger('focus');  
});

【讨论】：

谢谢，这行得通。此外，通过将 $('#selectMenu') 移出屏幕来隐藏它可能是个好主意： $('#selectMenu').parent().css({position:'absolute',top:'-1000px '}); - 演示：jsfiddle.net/pengyanb/8fkg0vpu/24.
嘿。很抱歉挖掘旧帖子，但这个解决方案对我不起作用。在我的 Android 5.1 chrome 浏览器中，单击按钮会聚焦选择（即它有一个橙色边框），但不会打开本机选择。关于为什么以及如何解决这个问题的任何想法？

【解决方案2】：

唯一适合我的解决方案是

function openSelect(select) {
    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);
        select[0].dispatchEvent(e);
    } else if (element.fireEvent) {
        select[0].fireEvent("onmousedown");
    }
}

但不幸的是，它仅限于 Safari 和 Chrome。我已经用 Android 6.0.1 进行了检查。

【讨论】：