android - iPhone/Android 引入原生下拉选择器

Question

有没有办法(可能使用 phoneGap)为一组元素引入 native 移动下拉选择器？

例如，有人点击进入列表:

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

这组元素会在 native iOS 下拉选择器中弹出，您可以单击其中一个吗？我正在谈论的下拉列表可以在这里看到:

我意识到您必须调用其他一些 native 函数来获取实际选择的返回值并使用该信息“做某事”。

我问的原因是因为我有一个使用 <ul> 创建的自定义选择器和 <li>元素，所以选择/下拉框是完全可定制的，我对它的工作方式很满意，但在移动版本上，长下拉框不像本地选择器那样用户友好。

Answer 1

我知道这个问题很老了，但我只是在为一些类似的问题而苦苦挣扎。 到目前为止，移动浏览器无需任何额外的 JS 即可支持这些 native 控件元素(我不确定去年移动设备是否具有相同的支持)。

所以你可以做的是以下内容。首先，您使用选择框建立一个列表: (当然它也适用于单个选择框)

 <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>

然后应用一些自定义样式使其看起来像 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;
}

就是这样。工作 live demo on JSBin (已使用 iOS 7 进行测试，但应该也适用于其他现代移动浏览器)。