选择 MDB Pro组件
选择-Bootstrap 5和Material Design 2.0表格
选择字段组件用于从列表中收集用户提供的信息 选项。
基本例子
多选
将 multiple
属性添加到select元素以激活多种模式。
用标签选择
可以通过创建带有以下内容的元素来添加选择标签
.form-label
和 .select-label
类。
使用占位符选择
使用 placeholder
选项设置选择输入的占位符。占位符将
输入为焦点且未选择任何选项时显示。
禁用选择
将 disabled
属性添加到select元素以禁用select输入。
禁用选项
在选项元素上使用 disabled
属性可禁用特定选项。
自订内容
将显示带有类 .select-custom-content
的自定义内容容器
在选择下拉列表的末尾。
可见选项
使用 visibleOptions
选项更改将显示的选项数量
在选择下拉列表中而不滚动。
次要文字
将 secondary-text
数据属性添加到特定选项以显示secondary
文本。
搜索
将 filter
选项设置为 true
以启用选项过滤。
选项组
可以使用 optgroup
元素对选项进行分组。
用图标选择
将 icon
数据属性添加到特定选项以显示选项图标。
验证方式
将 validation
选项设置为 true
以启用组件验证。的
validFeedback
和 invalidFeedback
选项允许修改
验证消息。
设定值
setValue
方法允许以编程方式设置组件选择。
单选
将单值字符串添加到参数列表以正确选择带有相应选项的选项 单选模式下的值。
多选
将字符串值数组添加到参数列表以正确选择带有 多重选择模式下的对应值。
选择 - API
用法
通过类
<select class="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
通过JavaScript
const mySelect = new mdb.Select(document.getElementById('mySelect'), options)
Options
Name | Type | Default | Description |
---|---|---|---|
container
|
String | 'body' |
Container for the select dropdown |
clearButton
|
Boolean | false |
Adds clear button to the select input |
disabled
|
Boolean | false |
Changes select input state to disabled |
displayedLabels
|
Number | 5 |
The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off. |
filter
|
Boolean | false |
Displays filter input that allow to search for specific option |
filterDebounce
|
Number | 300 |
Adds delay to the options list updates when using filter input. Improves performance of the select with filter. |
formWhite
|
Boolean | false |
Adjust input colors for dark backgrounds. |
invalidFeedback
|
String | Invalid |
The text which is displayed below the Material Select when the validate option is enabled and the select is invalid |
noResultsText
|
String | 'No results found' |
The text that will be displayed when no option is found after using select filter |
placeholder
|
String | - |
The text that will be displayed as select input placeholder |
size
|
String | 'default' |
Changes input size. Available options: 'sm', 'lg', 'default'. |
optionsSelectedLabel
|
String | 'options selected' |
The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected |
optionHeight
|
Number | 48 |
Height of the select option. Used to determine dropdown height and number of visible options. |
selectAll
|
Boolean | true |
Displays select all option in multiselect dropdown |
selectAllLabel
|
String | 'Select all' |
Changes label of select all option. |
searchPlaceholder
|
String | 'Search...' |
Changes placeholder of the select search input. |
validation
|
Boolean | false |
Adds required validation to the component. |
validFeedback
|
String | 'Valid' |
The text which is displayed below the Material Select when the validate option is enabled and the select is valid. |
visibleOptions
|
Number | 5 |
The maximum number of options which are visible in the select dropdown without scrolling. |
方法
Name | Description | Example |
---|---|---|
open |
Manually opens a select |
mySelect.open()
|
close |
Manually closes a select |
mySelect.close()
|
setValue
|
Programatically set component selections. Add single value for default select and array of values for multiselect. |
mySelect.setValue('3')
|
dispose
|
Disposes a select instance |
mySelect.dispose()
|
const selectEl = document.getElementById('mySelect')
const select = new mdb.Datepicker(selectEl)
select.open()
大事记
Name | Description |
---|---|
open.mdb.select
|
This event fires immediately when the select is opened. |
close.mdb.select
|
This event fires immediately when the select is closed. |
valueChange.mdb.select
|
This event fires immediately when the select value changes. |
optionSelect.mdb.select
|
This event fires immediately when the select option is selected. |
optionDeselect.mdb.select
|
This event fires immediately when the select option is deselected. |
const mySelect = document.getElementById('mySelect')
mySelect.addEventListener('open.mdb.select', (e) => {
// do something...
})
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Select } from 'mdb-ui-kit';