menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Drop-down selection

The drop-down selection allows the user to choose between multiple options.

Call method

  1. Called by CSS class
  2. Call through custom attributes (if the component is dynamically generated, you need to callmdui.mutation() To initialize)
  3. Call via JavaScript

Related Reading

Material Design Guidelines: Components-Drop Down Button

style

Native single-selection select component

in <select> Add a class to the element .mdui-select You can give the element a beautified style without calling JavaScript.

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

Native multi-select select component

Can also be in <select multiple> Add a class to the element .mdui-select, So that it can be multiple choices. But not all browsers can display this style well.

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

Call method

Called by custom attributes

There is no need to write JavaScript code to use this method. Just in <select> Add a class to the element .mdui-select with mdui-select="options" Attributes.

If the component is dynamically generated, you need to call mdui.mutation() Initialize.

codeplay_arrow
Example
State 1
State 1
State 2
State 3
State 4
State 5
State 6
<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
Example
State 1
State 1
State 2
State 3
State 4
State 5
State 6
<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
Example
State 1
State 1
State 2
State 3
State 4
State 5
State 6
<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>

Call via JavaScript

Instantiate components:

// selector is <select> Element's CSS selector or DOM element or HTML string
// options are configuration parameters, see the parameter list below
var inst = new mdui.Select(selector, options);
codeplay_arrow
Example
State 1
State 1
State 2
State 3
State 4
State 5
State 6
<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>

参数

parameter name Types of Defaults description
position string auto Select the location of the menu. include auto、top、bottom
gutter int 16 Select the minimum distance between the menu and the upper and lower borders of the window, in px. This parameter is only valid when position is auto.

method

Method name description
open() Open the drop-down menu.
close() Close the drop-down menu.
toggle() Toggles the open state of the drop-down menu.
handleUpdate() When you dynamically modified <select> When the content of the element, you need to call this method to regenerate the drop-down menu.

event

event description the goal parameter
open.mdui.select The event will be triggered when the drop-down menu starts to open the animation. <select class="mdui-select"></select> event._detail.inst：实例
opened.mdui.select The event will be triggered when the drop-down menu ends to open the animation.
close.mdui.select The event will be triggered when the drop-down menu starts to close the animation.
closed.mdui.select When the drop-down menu ends and closes the animation, the event will be triggered.

List of CSS class names

Class name effect
.mdui-select Define a Select component.
arrow_back Previous
Floating operation button
arrow_forward Next
Dividing line
Set document theme

Theme color

Main color

Accent color