选择 MDB Pro组件

选择-Bootstrap 5和Material Design 2.0表格

选择字段组件用于从列表中收集用户提供的信息选项。

基本例子

多选

将 multiple 属性添加到select元素以激活多种模式。

Example label

用标签选择

可以通过创建带有以下内容的元素来添加选择标签 .form-label 和 .select-label 类。

Example label

使用占位符选择

使用 placeholder 选项设置选择输入的占位符。占位符将输入为焦点且未选择任何选项时显示。

禁用选择

将 disabled 属性添加到select元素以禁用select输入。

禁用选项

在选项元素上使用 disabled 属性可禁用特定选项。

清除按钮

将 clearButton 选项设置为 true ，以显示允许清除当前选择。

自订内容

将显示带有类 .select-custom-content 的自定义内容容器在选择下拉列表的末尾。

可见选项

使用 visibleOptions 选项更改将显示的选项数量在选择下拉列表中而不滚动。

次要文字

将 secondary-text 数据属性添加到特定选项以显示secondary 文本。

搜索

将 filter 选项设置为 true 以启用选项过滤。

选项组

可以使用 optgroup 元素对选项进行分组。

用图标选择

将 icon 数据属性添加到特定选项以显示选项图标。

验证方式

将 validation 选项设置为 true 以启用组件验证。的 validFeedback 和 invalidFeedback 选项允许修改验证消息。

设定值

setValue 方法允许以编程方式设置组件选择。

单选

将单值字符串添加到参数列表以正确选择带有相应选项的选项单选模式下的值。

多选

将字符串值数组添加到参数列表以正确选择带有多重选择模式下的对应值。

选择 - API

用法

通过类

HTML


        <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

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()`

javascript


            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.

javascript


            const mySelect = document.getElementById('mySelect')
            mySelect.addEventListener('open.mdb.select', (e) => {
              // do something...
            })

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入此组件：

JavaScript


        import { Select } from 'mdb-ui-kit';