iPhone / Android induce native Dropdown picker

Question

Is there any way to (possibly with phoneGap) induce the native mobile dropdown picker for a set of elements?

For example, someone clicks into a list:

<ul class="dropdown">
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Apples</li>
    <li>Pears</li>
</ul>

And the set of elements pops up in a native iOS dropdown picker and you can click on one of them? A dropdown I'm talking about can be seen here:

I realize that you'd have to then call some other native function to get the return value of what was actually selected and "do something" with that information.

The reason I ask is because I have a custom select picker which is created using <ul> and <li> elements, so the select/dropdown box is fully customizable, and I'm happy with the way it works, but on mobile versions the long dropdown is not as user friendly as the native picker.

Solution

I know the question is quite old but I just struggled over some similar issue. By now the mobile browsers support those native control elements without the need for any additional JS (I'm not sure if mobiles had the same support last year).

So what you can do is the following. At first you build up a list with your select boxes: (of course it works with a single select box as well)

 <ul>
    <li>
        <select class="dropdown" name="fruits">
            <option value="Bananas">Bananas</option>
            <option value="Oranges">Oranges</option>
            <option value="Apples">Apples</option>
            <option value="Pears">Pears</option>
        </select>
    </li>
    <li>
        <select class="dropdown" name="cities">
            <option value="Arizona">Arizona</option>
            <option value="California">California</option>
            <option value="Colorado">Colorado</option>
            <option value="Conneticut">Conneticut</option>
        </select>
    </li>
</ul>

Then apply some custom styles to make it look like the native UI:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown {
    border: 1;
    padding: 3px 5px;
    width: 100%;
    /* attach a custom background image */
    background: url('http://dummyimage.com/15x15/00ff40/000&text=^') no-repeat right     center #FFF;

    /* prevent the default small pointer from showing up */
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

That's it. Working live demo on JSBin (tested with iOS 7 but should work in other modern mobile browsers as well).

Comments

[Mirko]

<select> does not work on Android 4.4.2 when used in WebView with Phonegap