<select> 下拉菜单在安卓上不可点击

Question

我已经阅读了很多关于这个问题的帖子和"修复"，但仍然没有找到解决方案。我们正在使用PhoneGap创建一个多平台应用程序，但我们在安卓设备上遇到了问题（在iPhone/iPad上运行良好）。我们的下拉菜单不起作用，点击它们也无济于事。

当用户"转到新页面"时，我们通过设置内容div的HTML来动态创建所有页面。例如，我们将以下内容附加到我们的一个页面的内容div中

<div class="dropdown-padding">
    <select class="trials-dropdown" id="diseaseSite">
        <option value="Any">Any</option>
        <option value="All Cancers">All Cancers</option>
        ...
        <option value="Prostate Cancer">Prostate Cancer</option>
        <option value="Sarcoma">Sarcoma</option>
    </select>
</div>

有人有什么想法吗？

Answer 1

如果你有这样的东西：

  <div class='multiselect-wrapper'>
    <div class='multiselect'>Age Range</div>
        <select type='hidden' class='age' id='age' name='age' multiple="">
           <option value='-1'>Age Range</option>
           <option value='6' title='Preyears'>Pre</option>
           <option value='7' title='Kids'>Kids</option>
           <option value='8' title='Tween'</option>
           <option value='9' title='Adult'>Adult</option>
        </select>
   </div>

如果它在你的android上不起作用（显示你想要选择的选项的本地抽屉），那么它可能是关于你的标签DIV的CSS问题，在这个例子中它将是".multiselect"。缺少的可能是"指针事件"请参阅此文档：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

如果你更新你的CSS如下：

.multiselect{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        pointer-events: none;
        cursor: pointer;
        line-height: 40px;
    }

然后它应该可以工作了，允许您单击select并显示带有multiselect选项的抽屉（基本上是原生的多复选框）。

希望这对你有用。

我和我的同事Basem一起做了这个，它对我们有效

干杯，

CG。

Answer 2

我从我的一个朋友那里听说了这个修复程序，他说要设置

style.display=block 

属性将解决此问题。

如果你有多个下拉菜单，那么使用迭代它们

document.getElementsByTagName('select')