Fire standard touchevent for <select> on mobile
<p>This is a bit like the following question, <a href="http://stackoverflow.com/questions/12012799/programatically-open-select-picker">Programatically open &lt;select&gt; picker</a> but I need it to work on <em>all smartphones</em> that have a built in handling of <code>&lt;select&gt;</code>s, not just Android. </p>

<p><strong>What I need is to fire the standard touchevent</strong> on <code>&lt;select&gt;</code>. On Android, for example, the <code>&lt;option&gt;</code>s will open up in a scroll-able list centered in the window. </p>

<p><strong>What I've tried so far in jQuery</strong> is to <a href="http://api.jquery.com/trigger/" rel="nofollow"><code>.trigger()</code></a> <code>touchstart</code>, <code>touchend</code>, <code>click</code>, <code>change</code>, <code>focus</code> but to no avail.</p>

<p>I've searched the web high and low and found nothing, maybe bad parameters <em>or maybe it is not just possible</em>. Or is it? Do you have the script I'm looking for in your back pocket? Is the solution jQuery Mobile (that I personally have no experience of)?</p>

<p>My testing rig is for now an old HTC Desire running Android ICS 4.0.4 and the standard Android webbrowser. I will try it on an iPhone and a Galaxy Tab tomorrow.</p>

<p><strong>UPDATE</strong></p>

<p>Tested on iPhone and a Tab with the same result of nothingness.</p>

<p>Including the demoscript if someone wants to try it, or say something about the syntax.</p>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;title&gt;Test of click&lt;/title&gt;
    &lt;style&gt;
        body{
            padding: 1em;
            margin: 0;
            font-size: 100%;
        }
        body,input,select,option{
            font-family: sans-serif;
        }
        select{
            font-size: 1em;
            min-width: 50%;
        }
        a{
            display: block;
            padding: 1em;
            background: #900;
            color: #fff;
            margin-bottom: 1em;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="buttons"&gt;
        &lt;a id="ts" href="#"&gt;touchstart&lt;/a&gt;
        &lt;a id="te" href="#"&gt;touchend&lt;/a&gt;
        &lt;a id="tm" href="#"&gt;touchmove&lt;/a&gt;
        &lt;a id="tc" href="#"&gt;touchcancel&lt;/a&gt;
        &lt;a id="cl" href="#"&gt;click&lt;/a&gt;
        &lt;a id="ch" href="#"&gt;change&lt;/a&gt;
        &lt;a id="fo" href="#"&gt;focus&lt;/a&gt;
    &lt;/div&gt;

    &lt;select id="temp"&gt;
        &lt;option&gt;Test 1&lt;/option&gt;
        &lt;option&gt;Test 2&lt;/option&gt;
        &lt;option&gt;Test 3&lt;/option&gt;
        &lt;option&gt;Test 4&lt;/option&gt;
    &lt;/select&gt;

    &lt;div id="message"&gt;&lt;/div&gt;

    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function(){
            $('div#buttons a').on('click',function(e){
                e.preventDefault();
                var act = $(this).text(); // touchstart, touchend etc
                $('#temp').trigger(act);
                $('#message').text(act+' pressed');
            });
        });

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
