near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Select
The select component allows users to choose from multiple options.
Usage
- Call via CSS classes
- Call via custom attributes (if the component is dynamically generated, you need to call
mdui.mutation()for initialization) - Call via JavaScript
Related Reading
Style
Native single-select component
Add the class .mdui-select to the <select> element to give it a styled appearance without calling 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>Native multi-select component
You can also add the class .mdui-select to a <select multiple> element to make it multi-selectable. However, not all browsers display this style well.
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>Usage
Call via Attributes
Using this method does not require writing JavaScript code. Simply add the .mdui-select class and the mdui-select="options" attribute to the <select> element.
If the component is dynamically generated, you need to call mdui.mutation() for initialization.
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>Call via JavaScript
Instantiate the component:
// selector is the CSS selector, DOM element, or HTML string of the <select> element
// options is the configuration parameters; see the parameter list below
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>Param
| Param Name | Type | Default | Description |
|---|---|---|---|
position | string | auto | The position of the selection menu. Includes auto, top, bottom |
gutter | int | 16 | The minimum spacing between the selection menu and the top/bottom window borders, in px. This parameter is only valid when position is auto. |
Method
| Method Name | Description |
|---|---|
open() | Open the selection menu. |
close() | Close the selection menu. |
toggle() | Toggle the open state of the selection menu. |
handleUpdate() | When you dynamically modify the content of the <select> element, you need to call this method to regenerate the selection menu. |
getState() | Returns the current open state of the selection menu. It includes four states (opening, opened, closing, closed). |
Event
| Event Name | Description | Target | Params |
|---|---|---|---|
open.mdui.select | Triggered when the selection menu starts its opening animation. | <select class="mdui-select"></select> | event._detail.inst: Instance |
opened.mdui.select | Triggered when the selection menu finishes its opening animation. | ||
close.mdui.select | Triggered when the selection menu starts its closing animation. | ||
closed.mdui.select | Triggered when the selection menu finishes its closing animation. |