Question

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

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

提前致谢。

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

<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>

var deferred = $q.defer();
    var retModel = undefined; 

    //modelizer fetch
    myModelObject.fetch(config).then(
            //1st function is the "success" function
            function(response) {
                console.log ("Fetch success path");     
                retModel = response;
                deferred.resolve(retModel);
            },  
            //2nd function is the error function.    
            function(errResponse) {
                console.log ("Error on fetch");
                deferred.reject(errResponse);
                //ErrorService.buildErrors(errResponse);                
            }
    );

    return deferred.promise;

Answer 1

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

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

Answer 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进行了检查。

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

2 个答案: