Question

我需要关闭jQuery Mobile的<select>下拉样式。最终，我希望设备本身（iPhone，Android，Blackberry等）确定<select>下拉列表的外观。

目前我的标记是（为显示目的减少了选项数量）：

<div data-role="fieldcontain">
    <label for="state">State:</label>
    <select name="state" id="state" data-role="none">
        <option value="MA">Massachusetts</option> 
        <option value="MI">Michigan</option> 
        <option value="MN" selected="selected">Minnesota</option> 
        <option value="MS">Mississippi</option> 
    </select> 
</div>

我尝试在data-role="none"上使用<select>，但没有任何改变。

有没有办法只关闭选择下拉菜单“关闭”jQuery Mobile？

Answer 1

根据http://jquerymobile.com/test/docs/forms/docs-forms.html

如果您希望jQuery Mobile不要触及特定的表单控件，只需将该元素赋予data-role =“none”属性即可。例如：

<label for="foo">
<select name="foo" id="foo"  data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>

Answer 2

从版本1.1开始，正确的方法是：data-enhance="false"

您还需要将此行添加到config：

$.mobile.ignoreContentEnabled = true;

http://jquerymobile.com/test/docs/forms/forms-all-native.html

Answer 3

在mobileinit内部，修复jQM选择器以按预期运行：

$.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';

Answer 4

虽然这个问题已经被认为已经回答了，但是我想补充一些问题，因为答案对我来说不是“开箱即用”，这可能会为其他人节省一些时间。< / p>

在我的情况下，当智能手机应用程序运行到Android时，我正在禁用智能手机应用程序的本机下拉菜单（因为它在打开本机下拉菜单时有一些丑陋的问题，已在另一个线程中报告）。解决问题的“魔法咒语”就是以下几行：

$(document).bind('mobileinit',function(){
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        $("select").attr("data-native-menu","true");
    } else {
        $("select").attr("data-native-menu","false");
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
    }               
});

这些行位于jQuery之后和jQuery-Mobile之前加载的自定义脚本中。 保持订单非常重要，否则控件已初始化且无效！

我希望这个建议可以节省一些时间给某人！

Answer 5

是的，您必须进入控制JQuery Mobile UI下拉样式的CSS文件，并删除您不想出现的任何样式。

Answer 6

他们仍在使用它，使用最新的git代码，但我不推荐它： https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350

Answer 7

使用此属性应该有帮助

$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file...

Answer 8

试试data-native-menu="true"

来自doc的

：通过添加data-native-menu =＆＃34; true＆＃34;属于选择，框架将在单击选择按钮时使用浏览器的本机选择菜单。由于此选项不使用任何自定义菜单解析和菜单生成逻辑，因此它比自定义菜单版本快得多。自定义选择菜单增加了选择主题的能力，并提供跨平台的视觉一致性此外，它修复了某些平台上的一些缺失功能：Android上的optgroup支持，WebOS上的多选功能，并添加了一种处理占位符的优雅方式值。

for more info

如何“关闭”<select>下拉菜单的jQuery Mobile样式？</select>

8 个答案: