如何“关闭”jQuery Mobile 的 <select> 下拉样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4348757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to "turn off" jQuery Mobile's styling of <select> drop downs?
提问by thorn100
I need to turn off jQuery Mobile's styling of <select>drop downs. Ultimately I'd like the device itself (iPhone, Android, Blackberry, etc.) to determine how the <select>drop down looks.
我需要关闭 jQuery Mobile 的<select>下拉样式。最终，我希望设备本身（iPhone、Android、黑莓等）来确定<select>下拉菜单的外观。
Currently my markup is (option quantity reduced for display purposes):
目前我的标记是（出于显示目的减少了选项数量）：
<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>
I tried using data-role="none"on the <select>but nothing changed.
我尝试使用data-role="none"，<select>但没有任何改变。
Is there a way to "turn off" jQuery Mobile for just the select drop down?
有没有办法只为选择下拉菜单“关闭”jQuery Mobile？
回答by user418775
according to http://jquerymobile.com/test/docs/forms/docs-forms.html
根据http://jquerymobile.com/test/docs/forms/docs-forms.html
If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:
如果您希望 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>
回答by Yury Gomozov
Since Version 1.1 the right way to do it is: data-enhance="false"
从 1.1 版开始，正确的做法是： data-enhance="false"
You will also need to add this line to config:
您还需要将此行添加到配置中：
$.mobile.ignoreContentEnabled = true;
http://jquerymobile.com/test/docs/forms/forms-all-native.html
http://jquerymobile.com/test/docs/forms/forms-all-native.html
回答by opalenzuela
Although this question is considered answered already, I'd like to add some more lines, since the answer didn't work "out-of-the-box" for me, and this might save some time for others.
虽然这个问题已经被认为已经回答了，但我想添加更多的行，因为答案对我来说不是“开箱即用”的，这可能会为其他人节省一些时间。
In my case, I'm disabling the native dropdowns for a smartphone application when it runs into Android (since it has some ugly issues when opening native dropdowns, reported already in another thread). The "magic spell" that solved the problem to me is just the following lines:
就我而言，当智能手机应用程序运行到 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;
}
});
These lines are in a customization script loaded just after jQuery and just before jQuery-Mobile. It's important to keep the order, otherwise the controls are already initialized and it has no effect!
这些行在 jQuery 之后和 jQuery-Mobile 之前加载的自定义脚本中。保持顺序很重要，否则控件已经初始化，没有任何作用！
I hope this advice can save some time to someone!
我希望这个建议可以为某人节省一些时间！
回答by Wade Harrell
Inside mobileinit, fix the jQM selector to behave as expected:
在 mobileinit 中，修复 jQM 选择器以使其按预期运行：
$.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';
回答by bCliks
just try data-native-menu="true"
你试一试 data-native-menu="true"
from doc : By adding the data-native-menu="true" attribute to the select, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version. The custom select menus add the ability to theme the select and provide visual consistency across platforms In addition, it fixes over some missing functionality on certain platforms: optgroup support on Android, multi-select capability on WebOS, and adds an elegant way to handle placeholder values.
来自 doc ：通过向选择添加 data-native-menu="true" 属性，当单击选择按钮时，框架将使用浏览器的本机选择菜单。由于此选项不使用任何自定义菜单解析和菜单生成逻辑，因此它比自定义菜单版本快得多。自定义选择菜单增加了选择主题的能力，并提供跨平台的视觉一致性此外，它修复了某些平台上的一些缺失功能：Android 上的 optgroup 支持，WebOS 上的多选功能，并添加了一种处理占位符的优雅方式值。
回答by Hyman
Yes, you have to go into the CSS file that controls the JQuery Mobile UI dropdown(s) style and remove any styling you don't want to appear.
是的，您必须进入控制 JQuery Mobile UI 下拉列表样式的 CSS 文件并删除您不想出现的任何样式。
回答by Mark
They're still working on it, works in latest git code but I wouldnt recommend it: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350
他们仍在研究它，使用最新的 git 代码，但我不推荐它：https: //github.com/jquery/jquery-mobile/issuesearch?state =closed &q =select#issue/350
回答by zoom_pat277
Using this property should help
使用此属性应该会有所帮助
$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file...
