JQuery Mobile native select not working on droid

Question

This is absolutely driving me crazy. I have the Droid X 2.3.3. For some reason the native select menus will not open when data-role="none" or "data-native-menu="true" are set. Does anyone have any idea why this is happening?

<!DOCTYPE HTML>

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
        </head>
    <body>
        <div id="wrapper-div">
            <div data-role="page" data-theme="b"> 
                <div data-position="inline" data-role="header">                
                    <h1>Test Page</h1>
                </div>
                <div id="content" data-role="content">               
                    <form action="" method="post">
                        <fieldset data-role="fieldcontain">
                        <label for="some-options">Some Options:</label>
                            <select data-native-menu="true" name="some-options" id="some-options">
                                <option value="1">Option 1</option>    
                                <option value="2">Option 2</option>      
                            </select>
                        </fieldset>

                        <fieldset data-role="fieldcontain">
                        <label for="mote-options">More Options:</label>
                            <select data-role="none" name="more-options" id="more-options">
                                <option value="1">Option 1</option>    
                                <option value="2">Option 2</option>      
                            </select>
                        </fieldset>

                        <fieldset data-role="fieldcontain">
                        <label for="evenmore-options">Even More Options:</label>
                            <select name="more-options" id="evenmore-options">
                                <option value="1">Option 1</option>    
                                <option value="2">Option 2</option>      
                            </select>
                        </fieldset>
                    </form>
                </div>
            </div>    
        </div>
    </body>
</html>

score 15 · Accepted Answer · answered Jul 01 '11 at 13:07

15

I've experienced the same thing. You need to keep the data-type="page" directly under <body>. See this jQM-issuefor more details: https://github.com/jquery/jquery-mobile/issues/1051

So, remove the <div id="wrapper-div"> - you don't need it anyway ;-) However, I believe that jQM shouldn't put these kinds of restraints on us developers. After all, it does work on an iPhone, so I'm quite curious to why it doesn't work properly on Android.

answered Jul 01 '11 at 13:07

hnilsen

1,987
2
18
28

1

+1 You sir are a life saver! This helped me. Seems like still they have this problem. – Hanlet Escaño Jan 23 '13 at 23:18
They could have mentioned this in the documentation – Pete Jul 30 '13 at 13:33

score 2 · Answer 2 · answered Jun 15 '11 at 13:19

2

From what i know there's no need to use data-role="none"

simply set data-native-menu="true" will do.

 <select data-native-menu="true" name="some-options" id="some-options">
          <option value="1">Option 1</option>    
          <option value="2">Option 2</option>      
 </select>

Sample here

answered Jun 15 '11 at 13:19

root

1,573
3
23
38

1

I'm having the same behavior with the link you provided. The menu is not opening. – Micah Jun 15 '11 at 14:21
i do not own an android but i've tried it on the emulator running 2.3.3 and it works for me. Maybe you wanan try using 1.0a4 instead of a3? – root Jun 20 '11 at 07:01

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

I had the same issue and changing to data-native-menu=false helped, because I don't have SELECT element inside FORM element.

If I understand properly, you should set data-native-menu=true, if you have SELECT inside FORM, based on discussion here:

JQuery Mobile Select Box not working

edited May 23 '17 at 11:43

Community

1
1

answered Oct 11 '12 at 11:31

NoblesCZ

41
2

JQuery Mobile native select not working on droid

3 Answers3