Multi Select <select> box on mobile devices

Question

I have an interface which uses multi select listboxes with a css set height to populate other lists.

Basically:

<select multiple="multiple" size="5" style="height:150px;">
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>    

</select>

<select multiple="multiple" style="height:150px;"></select>

Using jQuery, basically you select some things in the first one, and it moves them to the second one.

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.

This very simple jsFiddle shows what I am talking about with the select boxes not showing their content:

http://jsfiddle.net/VhXwA/2/

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?

If there isn't a way to do that, what would be the best way to implement something like that that is mobile friendly?

Edit:

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:

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.

Answer 1

This behavior in mobile browsers is by design to improve user experience . According to Safari Web Content Guide

Use the Select Element If you use the select HTML element in your webpage, iOS displays a custom select control that is optimized for selecting items in the list using a finger as the input device. On iOS, the user can flick to scroll the list and tap to select an item from the list.

This being said:

• I'd recommend not fight it but leverage it for sake of mobile users

• use media-queries to apply different css for your select elements for desktop and mobile browsers;

• if number of options displayed is small enough consider using <input type="checkbox">

  instead of select because it's behavior is consistent across browsers.

Answer 2

I've been using a similar interface, and it has worked great for desktop users, but is completely un-intuitive on touch devices where a multi-select is not displayed as a multi-line scrollable list.

It seems like you need an entirely custom control, but I've found two Jquery controls that appear to implement this functionality (although in a slightly different way).

Eric Hynds Jquery UI multiselect: http://comsim.esac.esa.int/rossim/3dtool/common/utils/jquery/ehynds-jquery-ui-multiselect-widget-f51f209/demos/index.htm

Quasi Partikels sortable searchable multi-select widget: http://quasipartikel.at/multiselect/

Both of these appear a little fiddly on a phone size device, but particularly the Quasi Partikel version which uses a small "+" on the left of an item to add it, whereas Eric Hynds allows the entire item to be tapped to select/deselect. Either could be improved with mobile specific styles to increase the size of critical elements I suppose.

Answer 3

From what I understand, I think it would be much easier to redirect to another page depending on the option selected unless there is a reason you didn't choose this in the first place.

I don't see why you can't just use a dropdown list of checkboxes. These are compatible pretty much everywhere and certainly on all smartphones.

<select name="Dropdown1">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
<option value="o4">Option 4</option>
</select>

Or

<input type="checkbox" name="checkbox" value="o1">Option 1<br>
<input type="checkbox" name="checkbox" value="o2">Option 2

(http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2 and http://www.w3schools.com/html/html_forms.asp)