<select> 在 Android 2.3.3 上的 Phonegap 应用程序中不起作用
Posted
技术标签:
【中文标题】<select> 在 Android 2.3.3 上的 Phonegap 应用程序中不起作用【英文标题】：<select> not working in Phonegap app on Android 2.3.3 【发布时间】：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" 可能是元素高度问题。检查这个 - ***.com/a/33922023/3619617 【参考方案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;
希望它对某人有所帮助。
【讨论】：
以上是关于<select> 在 Android 2.3.3 上的 Phonegap 应用程序中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
iScroll 4 不适用于表单 <select> 元素 iPhone Safari 和 Android 浏览器
error:please select android sdk