下拉选择可以让用户在多个选项之间进行选择。
mdui.mutation() 进行初始化）<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 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() 进行初始化。
<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><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><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>实例化组件：
// selector 为 <select> 元素的 CSS 选择器或 DOM 元素或 HTML 字符串
// options 为配置参数，见下面的参数列表
var inst = new mdui.Select(selector, options);<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>| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
position | string | auto | 选择菜单所处位置。包括 auto、top、bottom |
gutter | int | 16 | 选择菜单距离窗口上下边框至少保持多少间距，单位为 px。该参数仅在 position 为 auto 时有效。 |
| 方法名 | 描述 |
|---|---|
open() | 打开下拉菜单。 |
close() | 关闭下拉菜单。 |
toggle() | 切换下拉菜单的打开状态。 |
handleUpdate() | 当你动态修改了 <select> 元素的内容时，需要调用该方法来重新生成下拉菜单。 |
getState | 返回当前下拉菜单的打开状态。共包含四种状态（opening、opened、closing、closed）。 |