在PhoneGap中，<select>框在Android上无法显示

Question

我在一个PhoneGap应用程序中有一些HTML代码，它显示一个<select>框供用户使用。当我点击它时，通常的Android选择屏幕不会弹出。我之前在webOS上也遇到了类似的问题（尽管当时下拉菜单正常工作）。 <select>位于一个<div>内，在执行过程中某些时候会隐藏或显示。

<div id="submit">
  <ul class="rounded">
    <li><select id="item"></select></li>
  </ul>
</div>

问题只会在<div>被隐藏并再次显示时出现（无论是通过CSS直接隐藏还是使用jQuery的hide()和show()方法）。如果我将<select>框移动到该<div>之外，或者使<div>始终可见，则下拉菜单的行为就像应该的一样，没有问题。

这是为什么呢？

- Steve Nay

---

我之前也注意到了同样的问题；在某些模拟器/设备上，我确实让它工作了，但你必须点击选择框上的小箭头，而不是文本。相当糟糕 :/ - fil maj

我想知道那是否与此有关。jQTouch完全以不同的方式显示选择框（即，不再有箭头）。感谢您的见解！ - Steve Nay

Answer 1

在这种情况下，问题实际上是由jQTouch引起的。要修复它，只需在jqtouch.css中注释掉这4行即可。

在"body"下面。

  /*-webkit-perspective: 800;*/
  /*-webkit-transform-style: preserve-3d;*/ 

在“body > *”下方

/*-webkit-backface-visibility: hidden;*/
/*-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);*/

- a.stringham

---

谢谢！我很高兴你解决了这个问题。 - Steve Nay

Answer 2

我在一个使用iScroll + Phonegap构建的Android应用程序中遇到了同样的问题。 不要使用iScroll

- Ivan

Answer 3

我认为您正在遇到这个问题： http://code.google.com/p/android/issues/detail?id=10280

- Anders Ekdahl

---

我相信你是对的。我会稍后隐藏并显示选择框。我们只能等待错误修复。 :) 感谢你的研究！ - Steve Nay

我每天都在与这个bug共存，它真的很让人恼火。一个奇怪的折中办法是在它们变成可见后克隆所有选择列表。虽然我不对克隆元素做任何操作，但克隆本身似乎会触发Android使它们正常工作。但并非在所有情况下都有效。今天我注意到的另一件事是，如果您的选择列表正好放在另一个元素的正上方，选择列表可能会冻结。 - Anders Ekdahl