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

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>

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

有没有办法只为选择下拉菜单“关闭”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"

您还需要将此行添加到配置中：

$.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

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

在我的例子中，当智能手机应用程序运行到 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"

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

for more info