iPhone / Android诱导本机Dropdown选择器

Question

有没有办法（可能使用phoneGap）为一组元素引导原生移动下拉选择器？

例如，有人点击列表：

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

这组元素会弹出一个原生的iOS下拉选择器，你可以点击其中一个？我在谈论的下拉列表可以在这里看到：

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

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

Answer 1

你可以使用像Mobiscroll这样的Javascript库;结帐他们的demo。

请注意，Mobiscroll服务仅限15天免费使用，因此请对其进行测试。

Answer 2

我知道这个问题已经很老了，但我只是在一些类似的问题上挣扎。 到目前为止，移动浏览器支持这些本机控制元素而无需任何额外的JS（我不确定移动设备去年是否有相同的支持）。

所以你能做的就是以下几点。首先，您使用选择框建立一个列表： （当然它也适用于一个选择框）

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

然后应用一些自定义样式使其看起来像本机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测试，但也可以在其他现代移动浏览器中使用）。