在Android 2.3中选择与Android 4.2不同的框样式

Question

I am working on a PhoneGap app in which clicking on a button generates a specific number of text boxes and select boxes based on user's input.

I tested the app on an AVD running Android 4.2. Everything was working fine and the selectboxes generated along with text boxes looked as the image below:

Now, I tested the same app in an AVD running android 2.3 which gave me the output shown here:

.

Clearly, the select box alone appears weird in Android 2.3 while the other controls like text box and buttons are absolutely fine.

I don't have any clue why this is happening. The app uses JQM and Cordova 2.5.0.

To give you some ground on what I am trying to explain, I have added the code below which is my select box markup

    <select class="sel" data-theme="a" id="selectmenu0">
         <option value="1">option1</option>
         <option value="2">option2</option>
         <option value="3">option3</option>
    </select>

Answer 1

I resolved the issue myself. The problem was with the way I generated the markup. For some unknown reason, Android 2.3 expects the DOM to be built before navigating to the next page where the generated DOM will be inserted.

But in my case, On receiving the input from the user, I did the following operations

1. I navigated to the target page
2. Then, I built the select box markup

For some reason, Android 2.3 expects the above steps to be in reverse order. Only then, JQM applies it's styling to select box.

Answer 2

I had the same problem and solved it by setting the parameter 'data-native-menu' to false, like this:

<select id="yourSelectBox" data-native-menu="false"></select>

I think this is simpler.