jQuery Mobile show native select menu on a button click event

Question

Is it possible to open up a native select menu on mobile device with a button click event? There can be a hidden select menu if needed.

I am aware that there maybe other ways such as using a panel widget. Just wondering if this approach is possible and anyone did it before.

Thanks in advance.

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>

Answer 1

The only solution that works for me is

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");
    }
}

but it's limited to Safari and Chrome, unfortunately. I've checked it with Android 6.0.1.

Answer 2

Yes you can do using trigger() in device.

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