menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

下拉选择

下拉选择可以让用户在多个选项之间进行选择。

调用方式

  1. 通过 CSS 类调用
  2. 通过自定义属性调用(若组件是动态生成的,则需要调用 mdui.mutation() 进行初始化)
  3. 通过 JavaScript 调用

样式

原生单选 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-selectmdui-select="options" 属性即可。

若组件是动态生成的,则需要调用 mdui.mutation() 进行初始化。

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 选择菜单所处位置。包括 autotopbottom
gutter int 16 选择菜单距离窗口上下边框至少保持多少间距,单位为 px。该参数仅在 positionauto 时有效。

方法

方法名 描述
open() 打开下拉菜单。
close() 关闭下拉菜单。
toggle() 切换下拉菜单的打开状态。
handleUpdate() 当你动态修改了 <select> 元素的内容时,需要调用该方法来重新生成下拉菜单。
getState 返回当前下拉菜单的打开状态。共包含四种状态(openingopenedclosingclosed)。

事件

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

CSS 类名列表

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