如何「關閉」jQuery Mobile的<select>下拉式樣？

我需要關閉jQuery Mobile的<select>下拉式樣。最終，我希望設備本身（iPhone，Android，Blackberry等）確定<select>的下拉外觀。如何「關閉」jQuery Mobile的<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的只是選擇下拉？

來源

2010-12-03 thorn100

你是否設法解決這個問題？ – 2011-03-01 13:55:39

這已在更新版本中修復。 http://jquerymobile.com/test/docs/#/test/docs/forms/forms-selects.html – thorn100 2011-06-05 16:58:28

如果您我更喜歡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>

來源

2011-09-28 16:48:25 user418775

當我最初發布時，這並不起作用我的問題，但jQuery Mobile團隊已將其添加進來。 – thorn100 2011-10-14 14:46:42

是的，您必須進入控制JQuery Mobile UI下拉樣式的CSS文件，並刪除您不想出現的任何樣式。

來源

2010-12-03 19:42:55 Jack

您可以使用jQuery自定義工具來執行此操作：http://jqueryui.com/download – DwB 2010-12-03 19:54:37

他將不得不進入CSS文件來覆蓋選擇樣式，除非他不想覆蓋他可能已經做出的任何其他JQuery UI自定義設置:-P – Jack 2010-12-03 19:58:25

他們還在它的工作，工作在最新的Git代碼，但我不會推薦它： https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350

來源

2010-12-14 16:02:34 Mark

是的，我認爲它比只是更多的參與擺弄CSS。我已經找到了幾條線索，但迄今爲止還沒有解決這個問題。看起來，將select-data = role =「none」或data-native =「true」添加到select應該會刪除jQuery增強功能，但到目前爲止，它並沒有爲我工作。 https://github.com/jquery/jquery-mobile/issues/issue/529 http://jquerymobile.com/test/#docs/forms/docs-forms.html – thorn100 2010-12-15 17:56:28

使用這個屬性，應根據http://jquerymobile.com/test/docs/forms/docs-forms.html

幫助

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

來源

2011-09-07 14:19:07

裏面mobileinit，修復JQM選擇到像預期的那樣：

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

來源

2012-10-16 17:11:05

由於1.1版做了正確的方法是：data-enhance="false"

您還需要將此行添加到配置中：

$.mobile.ignoreContentEnabled = true;

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

來源

2012-12-16 21:22:00

雖然這個問題已經被認爲已經回答了，但是我想補充一些更多的信息，因爲答案對我來說不是「開箱即用」的，並且這可能會爲其他人節省一些時間。

在我的情況下，我禁用智能手機應用程序在運行到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的移動前的自定義腳本。 保持訂單是非常重要的，否則控件已經初始化並且不起作用！

我希望這個建議可以節省一些時間給某人！

來源

2013-07-24 10:34:24 opalenzuela

只是嘗試data-native-menu="true"

從DOC：通過添加數據的本機菜單=「true」屬性來選擇，該框架將使用瀏覽器的原生選擇菜單點擊選擇按鈕時。因爲此選項不使用任何自定義菜單分析和菜單生成邏輯，所以它比自定義菜單版本快得多。自定義選擇菜單添加了將選擇主題化並提供跨平臺視覺一致性的功能此外，它還修復了某些平臺上的某些缺失功能：Android上的optgroup支持，WebOS上的多選功能，並添加了一種優雅的處理方式佔位符值。

for more info

來源

2014-03-25 04:40:55 bCliks

如何「關閉」jQuery Mobile的<select>下拉式樣？

回答

相關問題