<select> 在 Android 2.3.3 上的 Phonegap 应用程序中不起作用答案

【问题标题】：<select> not working in Phonegap app on Android 2.3.3<select> 在 Android 2.3.3 上的 Phonegap 应用程序中不起作用
【发布时间】：2012-03-03 20:22:21
【问题描述】：

我正在开发适用于 Android 和 iOS 的 Phonegap 应用。大多数东西都很好用，但我遇到了<select> 标签的问题。它通过 jQuery mobile 得到增强，并且在该版本的 Android 上，当单击/点击相应的 div 时，选项不会显示。当我单击/轻按两次时，它们就会出现：

在包含 <select> 的 div 上
在 div 上方的区域

在该方案选项中显示出来，触发所选的更改事件并且执行与其绑定的代码。

我发现了这两个安卓问题： http://code.google.com/p/android/issues/detail?id=10280 和 http://code.google.com/p/android/issues/detail?id=6721

我已经尝试了那里提到的解决方法，但它们并没有改变任何东西。我仍然需要点击两次，但这不是我所追求的行为。我只需要一键。

问题仅存在于 Android 2.3.3 上，我认为也存在于旧版本上。在 iOS 和更新的 Android 上，一切正常。

我整天都在努力解决这个问题并尝试了所有方法。

任何帮助，提示将不胜感激。谢谢。

【问题讨论】：

嗨，你能解决这个问题吗？
我正在检查它是否是一个 android 平台，如果是，我正在使用其他没有
更新：在 android 3.2.x 上，我之前评论中的解决方案存在问题，用户必须单击所选项目之外的某个位置才能使其正常工作
你应该添加 data-native-menu="false"
可能是元素高度问题。检查这个 - stackoverflow.com/a/33922023/3619617

标签： android html jquery-mobile cordova

【解决方案1】：

您是否尝试将 data-native-menu="false" 属性添加到选择菜单中。

例子：

<select name="gender" id="gender" data-theme="b" data-native-menu="false" >
    <option value="">Please specify ...</option>
    <option value="option1">Male</option>
    <option value="option2">Female</option>
    <option value="option3">Undisclosed</option>
</select>

【讨论】：

【解决方案2】：

这就是解决我的问题的方法。在 android 2.3.x 中，我将选择框上的 z-index 设置为 ~1000（远高于其他元素），它解决了问题。显然本机浏览器正在搞乱“层”。希望能帮助到你。

【讨论】：

【解决方案3】：

与 android 2.3 和 JavaScript 生成的选择框有同样的问题，我对此的解决方案是使用 jQuery 来聚焦元素，一旦它被渲染并且每次它被再次渲染（即使使用 $.SELECT.show() )。

在执行 $("#element").focus() 后，选择框再次正常运行，它既可点击，又在选择新选项后更新。

【讨论】：

当客户要求更新应用程序时会尝试 :) 感谢分享您的解决方案
这是一个疯狂的错误。非常感谢您的解决方案，当面对无法/不会更新其设备的客户时，它是真正的救星。在此之前，我尝试了许多其他建议，包括摆脱 position:fixed 和设置了 opacity 的元素，这些对我在 Android 2.3.6 上都没有影响。这个完成了这项工作。

【解决方案4】：

我遇到了同样的问题，我意识到问题是因为我使用了 data-position="fixed" 属性作为包含选择元素的页面标题。当我从我的标题中删除 data-position="fixed" 时，标题并没有固定，但摆脱了这个恼人的选择不被“点击”的问题。希望这会有所帮助！

【讨论】：

【解决方案5】：

它对我有用的唯一方法是在我的 jQuery 脚本中添加这个：

$('select').click(function () {
    $(this).focus();
});

【讨论】：

到目前为止，这似乎对我有用，除非在加载脚本时我的下拉菜单不可用，所以我使用“on”。

【解决方案6】：

我已经尝试了您的所有建议，但没有成功。我最终得到的不是最好的解决方案，但它比替代方案更好，如果没有其他方法可以更新选择框。我是这样用 jQuery 做的：

$(".select_box").change(function() {
    $(this).hide();
    $(".select_box").show();
});

笨蛋，更新了。

请记住，这只是一个解决方案，如果没有其他办法。

【讨论】：

【解决方案7】：

确保您的div 页面不在另一个div 中。它应该看起来像：

<body>
  <div data-role="page">
    ...
  </div>
 </body>

不是这样的：

<body>
  <div>
    ...
    <div data-role="page">
      ...
    </div>
    ...
  </div>
</body>

我在使用select 和data-native-menu="true" 时遇到了完全相同的问题，并且在我删除了额外的div 后一切正常。

【讨论】：

【解决方案8】：

我知道这个问题是两年前发布的，但以防有人今天遇到这个问题，就像我最近所做的那样：

我的行为和你说的一样。我遇到的问题是一个 div 作为标题出现，并且具有属性 data-role="header" 和 data-position="fixed"。 jquery mobile 中的一个错误会导致 Android 2.2/2.3 (http://demos.jquerymobile.com/1.3.2/widgets/fixed-toolbars/) 中出现许多奇怪的问题。

我修复了从标题中删除 'data-position="fixed"' 并使用以下代码添加自定义类的错误：

.custom-header{
    position: fixed !important;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    z-index: 999 !important;
}

希望它对某人有所帮助。

【讨论】：