title: Multi Select <select> box on mobile devices
body: <p>I have an interface which uses multi select listboxes with a css set height to populate other lists.</p>
  <p>Basically:</p>
  <pre><code>&lt;select multiple=&quot;multiple&quot; size=&quot;5&quot; style=&quot;height:150px;&quot;&gt;
      &lt;option value='1'&gt;one&lt;/option&gt;
      &lt;option value='2'&gt;two&lt;/option&gt;
      &lt;option value='3'&gt;three&lt;/option&gt;
      &lt;option value='4'&gt;four&lt;/option&gt;    
  
  &lt;/select&gt;
  
  &lt;select multiple=&quot;multiple&quot; style=&quot;height:150px;&quot;&gt;&lt;/select&gt;
  </code></pre>
  <p>Using jQuery, basically you select some things in the first one, and it moves them to the second one.</p>
  <p>This works great, and our users like it in non-mobile environments. BUT, on android tablets, phones, iphones and ipads,  the lists look empty until you click and it shows the built in scrolling select interface.   So you can't see the new ones when they are added to the second list.</p>
  <p>This very simple jsFiddle shows what I am talking about with the select boxes not showing their content:</p>
  <p><a href="http://jsfiddle.net/VhXwA/2/" rel="noreferrer">http://jsfiddle.net/VhXwA/2/</a></p>
  <p>Is there a way to override this behaviour without having to make my own custom thing, or use an entirely different way of doing this for mobile devices?</p>
  <p>If there isn't a way to do that, what would be the best way to implement something like that that is mobile friendly?</p>
  <p>Edit:</p>
  <p>Here is a basic picture of how this interface looks, the lists in either box could be very long or short.  but they have a set height, for consistency:
  <img src="https://i.stack.imgur.com/b0k40.png" alt="Example" /></p>
  <p>Edit:
  I can't imagine I'm the only one who's come across this!  There has got to be a way to make the mobile browsers behave properly.</p>