Android 行为不端上的 PhoneGap 选择框

Question

我的应用中有选择框，它们显示正确、可选择（即：可以单击它们，显然可以进行选择），但不符合它们应有的方式：

单击列表中的项目后，该选项的名称/值不会填充到表单中。

我发现了很多关于选择框问题的 stackoverflow 问题/答案，但似乎都不是我的问题。尽管如此，我已经尝试了这些建议但没有成功，包括在选择框中放置一个高 z-index 值，在 CSS 中添加一些 -webkit 特定值等等。

我试过了：

<select> box not displaying on Android in PhoneGap

<select> not working in Phonegap app on Android 2.3.3

PhoneGap build webkit-appearance no drop down arrow for select tag

https://github.com/jquery/jquery-mobile/issues/6992

https://www.daniweb.com/web-development/threads/451455/phonegap-select-box-is-not-working

不涉及 jQuery。

关于选择框我有什么遗漏吗？

一个例子——HTML：

<select name="people0" id="people0" onfocus="isDirty=1" style="display:inline-block;min-width:150px;" data-native-menu="true">
        <option value="0">Choose Person</option>
            <option value="15098">Desjardins, Emily</option>
        <option value="17304">Hulley, Patrick</option>
        <option value="1">Silver, Jason</option>
</select>

CSS：

select{
    /* Suggestions found: having trouble with not being able to select items: */
    -webkit-user-select: auto !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index:1000 !important;
}

11 月 8 日更新：

我发现了一个糟糕的解决方法——但至少你可以选择选项。当 HTML 响应来自服务器时，我检查其中是否有 select 元素，如果有，则将事件侦听器附加到它们：

var allSelectElements = document.getElementsByTagName('select');
for (var i=0; i < allSelectElements.length; i++) {
    allSelectElements[i].addEventListener('touchstart', function(e) {
        alert('initiating touch');
        this.focus;
    }, false);
}

我希望有人能一劳永逸地解决这个问题。 :-/

Answer 1

我用类似的代码解决了：

var allSelectElements = document.getElementsByTagName('select');
for (var i=0; i < allSelectElements.length; i++) {
    allSelectElements[i].addEventListener('touchstart', function(e){
        //This is the important line
        e.stopPropagation(); 
    }, false);
}

Answer 2

对我有用的唯一方法是添加一个 jQuery 技巧：

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