JQuery Mobile原生选择器在安卓上无法正常工作

Question

JQuery Mobile原生选择器在安卓上无法正常工作

14

这真让我疯狂。我使用的是Droid X 2.3.3版本。出于某种原因，当设置data-role="none"或"data-native-menu="true"时，本地选择菜单无法打开。有没有人知道为什么会发生这种情况？

<!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>

- Micah

3个回答

2

据我所知，不需要使用data-role="none"，只需设置data-native-menu="true"即可。

 <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

- root

1

我遇到了您提供的链接相同的问题。菜单无法打开。 - Micah

我没有安卓手机，但我在运行2.3.3的模拟器上尝试过它，并且对我有效。也许你可以尝试使用1.0a4而不是a3？ - root

0

我曾经遇到过同样的问题，将 data-native-menu=false 更改为 true 可以解决问题，因为我没有在 FORM 元素内部使用 SELECT 元素。

如果我理解正确的话，如果你在 FORM 内部使用了 SELECT 元素，那么应该将 data-native-menu 设置为 true，可以参考这里的讨论：

JQuery Mobile Select Box not working

- NoblesCZ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hnilsen · Accepted Answer

我也遇到过同样的问题。你需要将data-type="page"直接放在<body>标签下。了解更多详情请查看jQM-issue: https://github.com/jquery/jquery-mobile/issues/1051

因此，移除<div id="wrapper-div">吧——反正它不必要；-) 不过，我认为jQM不应该对开发者有这些限制。毕竟，它在iPhone上能够工作，所以我非常好奇为什么在Android上不能正常工作。