menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

下拉选择

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

调用方式

  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>

参数

参数名类型默认值描述
positionstringauto选择菜单所处位置。包括 autotopbottom
gutterint16选择菜单距离窗口上下边框至少保持多少间距,单位为 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 组件。