问题
I'm working on Phonegap app for Android and iOS. Most of the stuff works pretty well but I'm experiencing a problem with <select> tag. It's enhanced with jQuery mobile and on that version of Android when the appropriate div is clicked / tapped the options are not showing up. They show up when I do two clicks / taps:
- on a div containing
<select> - on a area above the div
In that scenario options show up and when selected change event is fired and code bind to it is executed.
I found these two android issues: http://code.google.com/p/android/issues/detail?id=10280 and http://code.google.com/p/android/issues/detail?id=6721
I have tried the workarounds mentioned there but they don't change anything. I still have to do two clicks but it's not the behavior I'm after. I only need one click.
Issue exists only on Android 2.3.3 and I think on older versions too. On iOS and newer Androids everything works perfectly fine.
I'm struggling with this issue whole day and tried everything.
Any help, tips would be heavily appreciated. Thanks.
回答1:
Did You try adding data-native-menu="false" attribute to the select menu.
Example:
<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:
This is what solved my problem. In android 2.3.x I've set z-index on select box to ~1000(far above other elements) and it solved the problem. Apparently native browser is messing up the "layers". Hope it helps.
回答3:
Having the same problem with android 2.3 and a JavaScript generated select box, my solution for this was using jQuery to focus the element once it was rendered and every time it was rendered again (even if using $.SELECT.show()).
After doing $("#element").focus() the select box behaves normally again, its both clickable and updates after selecting a new option.
回答4:
I had the same problem, i realized the problem was because i had used data-position="fixed" property for the heading of the page which contained the select element. when i removed data-position="fixed" from my heading, heading was not fixed surely, but got rid of this annoying problem of selects not being 'clicked'. hope this helps!
回答5:
The only way it worked for me was adding this on my jQuery script:
$('select').click(function () {
$(this).focus();
});
回答6:
I have tried all of your suggests with no luck. What i've ended up with is not the best solution, but it's better than the alternative, if nothing else will update the select box. I did it with jQuery like this:
$(".select_box").change(function() {
$(this).hide();
$(".select_box").show();
});
Bum, updated.
Please remember, that this is only a solution if nothing else will work.
回答7:
Make sure your div page is not inside another div. It should look like:
<body>
<div data-role="page">
...
</div>
</body>
NOT like this:
<body>
<div>
...
<div data-role="page">
...
</div>
...
</div>
</body>
I had exactly the same problem using a select with data-native-menu="true" and all worked fine once I removed that extra div.
回答8:
I'm aware this question was published two years ago, but just in case someone face this problem today, as I did recently:
I had the same behaviour as the one you tell. The problem I had was with a div that appeared as a header and had the attribute data-role="header" and data-position="fixed". There's a bug in jquery mobile that causes a number of strange issues in Android 2.2/2.3 (http://demos.jquerymobile.com/1.3.2/widgets/fixed-toolbars/).
I fixed that error removing 'data-position="fixed"' from the header and adding a custom class with the following code:
.custom-header{
position: fixed !important;
left: 0px !important;
right: 0px !important;
top: 0px !important;
z-index: 999 !important;
}
Hope it helps somebody.
来源：https://stackoverflow.com/questions/9243477/select-not-working-in-phonegap-app-on-android-2-3-3