menuMDUI文件
color_lens
基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

下拉選擇

下拉選擇可以讓使用者在多個選項之間進行選擇。

呼叫方式

  1. 透過 CSS 類別呼叫
  2. 透過自訂屬性呼叫（若元件是動態產生的，則需要呼叫 mdui.mutation() 進行初始化）
  3. 透過 JavaScript 呼叫

相關閱讀

Material Design 設計規範：元件 - 下拉按鈕

樣式

原生單選 select 元件

在 <select> 元素上加入類別 .mdui-select 即可為該元素賦予美化後的樣式，無需呼叫 JavaScript。

codeplay_arrow
範例
<select class="mdui-select">
  <option value="1" selected>State 1</option>
  <option value="2">State 2</option>
  <option value="3">State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

原生多選 select 元件

也可以在 <select multiple> 元素上加入類別 .mdui-select，使之可多選。但並不是所有瀏覽器都能很好地展示此樣式。

codeplay_arrow
範例
<select multiple size="8" class="mdui-select">
  <optgroup label="Fonts">
    <option>Roboto</option>
    <option>Calibri</option>
    <option>Courier New</option>
    <option>Verdana</option>
  </optgroup>
  <optgroup label="Size">
    <option>50%</option>
    <option>75%</option>
    <option>90%</option>
    <option>100%</option>
  </optgroup>
  <optgroup label="header">
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
    <option>h4</option>
  </optgroup>
</select>

呼叫方式

透過自訂屬性呼叫

使用該方式無需編寫 JavaScript 程式碼。只需在 <select> 元素上加入類別 .mdui-select 和 mdui-select="options" 屬性即可。

若元件是動態產生的，則需要呼叫 mdui.mutation() 進行初始化。

codeplay_arrow
範例
<select class="mdui-select" mdui-select>
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>
codeplay_arrow
範例
<select class="mdui-select" mdui-select="{position: 'top'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>
codeplay_arrow
範例
<select class="mdui-select" mdui-select="{position: 'bottom'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

透過 JavaScript 呼叫

實例化元件：

// selector 為 <select> 元素的 CSS 選取器或 DOM 元素或 HTML 字串
// options 為配置參數，見下面的參數清單
var inst = new mdui.Select(selector, options);
codeplay_arrow
範例
<select class="mdui-select" id="demo-js">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

<script>
  var inst = new mdui.Select('#demo-js');
</script>

參數

參數名稱類型預設值說明
positionstringauto選擇選單所處位置。包括 auto、top、bottom
gutterint16選擇選單距離視窗上下邊框至少保持多少間距，單位為 px。該參數僅在 position 為 auto 時有效。

方法

方法名稱說明
open()開啟下拉選單。
close()關閉下拉選單。
toggle()切換下拉選單的開啟狀態。
handleUpdate()當你動態修改了 <select> 元素的內容時，需要呼叫該方法來重新產生下拉選單。
getState()傳回目前下拉選單的開啟狀態。共包含四種狀態（opening、opened、closing、closed）。

事件

事件名稱說明目標參數
open.mdui.select下拉選單開始開啟動畫時，事件將被觸發。<select class="mdui-select"></select>event._detail.inst：實例
opened.mdui.select下拉選單結束開啟動畫時，事件將被觸發。
close.mdui.select下拉選單開始關閉動畫時，事件將被觸發。
closed.mdui.select下拉選單結束關閉動畫時，事件將被觸發。

CSS 類別清單

類別名稱說明
.mdui-select定義一個 Select 元件。
arrow_backPrevious
浮動動作按鈕
arrow_forwardNext
分隔線