下拉选择

样式

原生单选 select 组件

在 <select> 元素上添加类 .mdui-select 即可为该元素赋予美化后的样式，无需调用 JavaScript。

Example

<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，使之可多选。但并不是所有浏览器都能很好的展示此样式。

Example

<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" 属性即可。

Example

<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>

Example

<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>

Example

<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);

Example

<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>` 元素的内容时，需要调用该方法来重新生成下拉菜单。

事件

事件	描述	目标	参数
`open.mdui.select`	下拉菜单开始打开动画时，事件将被触发。	`<select class="mdui-select"></select>`	`event.detail.inst`：实例
`opened.mdui.select`	下拉菜单结束打开动画时，事件将被触发。
`close.mdui.select`	下拉菜单开始关闭动画时，事件将被触发。
`closed.mdui.select`	下拉菜单结束关闭动画时，事件将被触发。

CSS 类名列表

类名	效果
`.mdui-select`	定义一个 Select 组件。

调用方式

相关阅读

样式

原生单选 select 组件

原生多选 select 组件

调用方式

通过自定义属性调用

通过 JavaScript 调用

参数

方法

事件

CSS 类名列表