# 選擇菜單 Select menus 選擇菜單摒棄了原生的select 元素的樣式，原生的select元素被隱藏，并被一個由jquery mobile框架自定義樣式的按鈕和菜單替代。菜單是ARIA的（即Accessible Rich Internet Applications)并且桌面電腦的鍵盤也是可訪問的。 當被點擊時，手機自帶的原生的菜單選擇器會打開。菜單內某個值被選中后，自定義的選擇按鈕的值更新為你選擇的那一個。 要添加這樣的選擇菜單組件，使用標準的select 元素和位于其內的一組option元素。注意要把label的for屬性設為select的id值，使他們能夠在語義上相關聯。把它們包裹在data-role="fieldcontain" 的div 里面進行分組。 框架會自動找到 所有的select 元素并自動把他們增強為自定義的選擇菜單。 **選擇菜單 Select menus** ``` <div data-role="fieldcontain"> 　 <label for="select-choice-1" class="select">Choose shipping method:</label> 　 <select name="select-choice-1" id="select-choice-1"> 　　 <option value="standard">Standard: 7 day</option> 　　 <option value="rush">Rush: 3 days</option> 　　 <option value="express">Express: next day</option> 　　 <option value="overnight">Overnight</option> 　 </select> </div> ``` **選擇菜單 Select menus　**  就會形成這樣的列表菜單  注意：原生的選擇菜單不能通過multiple="multiple" 屬性進行多項選擇，如果你有這個需求，我們建議使用自定義菜單。 ## 使用自定義菜單的選項 Option to use custom menus 你可以自己選擇使用自定義樣式的選擇菜單，而不是原生的。這樣可以給菜單定義主題，使你的網站在視覺和體驗上更加出色，而且在跨平臺時也能夠保持一致性。 并且，他提供了對菜單的多項選擇，并且修復了某些平臺缺失的功能，比如Android對于optgroup的支持，并且增加了一種優雅的方式來處理占位符值。（下面會解釋）。最后，自定義的菜單在桌面電腦瀏覽器上視覺上會更出色，因為原生的菜單在桌面電腦上看上去比移動設備上要小一些，那如果你的項目主要面對桌面用戶的話，那視覺上就有點奇怪了。 注意，把原生菜單解析為自定義菜單的話會有性能開銷。如果你頁面里面有很多選擇菜單，，或者某個菜單有很多選項，就會影響頁面性能，所以我們的建議是不要濫用自定義菜單。 給菜單添加data-native-menu="false"屬性，就可以把菜單轉為自定義菜單。或者，在頁面的mobileinit事件的回調函數中將選擇菜單的nativeMenu設為false也可以達到相同的效果。這將會在全局把所有的選擇菜單都默認設為自定義菜單。以下代碼必須在jQuery加載后且 jQuery Mobile加載前添加： ``` $(document).bind('mobileinit',function(){ 　　$.mobile.selectmenu.prototype.options.nativeMenu = false; }); ``` 如果菜單的選項不多的話，會以小彈出框的形式和動畫出現。  如果選擇菜單太多的選項而不能顯示在屏幕中，框架會自動創建一個新 "page"，表現為一個標準的列表，包含了所有的選項。使我們能通過設備原生的滾動條在很長的一個列表內選擇所有的選項。頁面的標題就是label的文本。 ## 占位符選項 Placeholder options ? 沒有值的option（或者一個空值屬性） ? 沒有文本節點的option ? 帶有data-placeholder="true"屬性的option。（使你將帶有值以及文本節點的選項用來作為占位符。） 你可以通過插件的 hidePlaceholderMenuItems 選項禁用該特性，方法如下： ``` $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false; ``` ## 禁用選項 Disabled options jQuery Mobile會把帶有disabled 屬性的選項禁用并且在樣式上標記。 在下面的實例中，第二個選項 "Rush: 3 days"被設置為禁用：  ## 對于選項組的支持 Optgroup support 如果一個選擇菜單包含 optgroup元素，jQuery Mobile會根據label的文本創建一個分割項的選項：  ## 多項選擇 Multiple selects 如果給你的選單加入multiple 屬性，jQuery Mobile通過一系列的方式來增強元素： ? 菜單里面會創建一個header元素并在占位符文本旁邊顯示一個關閉按鈕。 ? 點擊選項時不會關閉彈出菜單。 ? 選項旁邊會出現類似checkbox的圖標。 ? 超過2項被選擇時會在選擇按鈕里出現一個表示當前選項數目的氣泡。 ? 選擇的各項文本會在按鈕里變成一行用逗號分隔的文本。如果按鈕不夠寬，多余的部分則會變成省略號。 ? 如果沒有選項被選擇，按鈕文本會保持占位符的文本 ? 如果占位符元素不存在，默認按鈕文本會是空白的，header也僅僅顯示一個關閉按鈕。因為這不是友好的用戶體驗， 我們建議你在使用多選菜單時總是指定一個占位符元素。。  當選項太多以至于菜單會在一個新的頁面出現時，占位符文本會在沒有選項是顯示在按鈕中，label文本會在菜單的header中顯示。這與小對話框式的選擇菜單不同的，小對話框式的選擇菜單的占位符文本會同時顯示在按鈕和header中。 ## Data 屬性的支持 Data attribute support 你可以對select指定jqmobile的針對button 的data- 屬性。例如：我們給下面的例子添加了 theme, icon and inline 屬性。  ## 刷新選擇菜單 Refreshing a select 如果你通過js操作了選擇菜單，務必通過refresh 方法來更新他的樣式。 ``` var myselect = $("select#foo"); myselect[0].selectedIndex = 3; myselect.selectmenu("refresh"); ```